Grille CSS - Une plongée en profondeur

Conférence 9 : Grille CSS - Une plongée en profondeur

Bienvenue à la neuvième conférence du cours "De base à Brilliance". Dans cette conférence, nous explorerons CSS Grid, un système de mise en page puissant qui vous permet de créer facilement des mises en page Web complexes. Alors que Flexbox est idéal pour les mises en page unidimensionnelles (lignes ou colonnes), CSS Grid fournit un système de mise en page bidimensionnel, vous permettant de contrôler simultanément les lignes et les colonnes.

Qu'est-ce que la grille CSS ?

CSS Grid est un système de mise en page en CSS qui permet la création de mises en page flexibles, réactives et basées sur une grille. Il vous permet d'aligner les éléments en lignes et en colonnes, offrant ainsi plus de contrôle sur la structure de mise en page que Flexbox.

Terminologie de la grille

Avant de plonger dans des exemples, familiarisons-nous avec quelques termes clés :

• Grid Container : L'élément parent qui contient la grille.
• Éléments de la grille : les éléments enfants à l'intérieur du conteneur de grille.
• Lignes de grille : Les lignes de séparation horizontales et verticales de la grille.
• Grid Tracks : L'espace entre deux lignes de grille, formant des lignes ou des colonnes.
• Cellules de la grille : Les plus petites unités individuelles de la grille formées par l'intersection d'une ligne et d'une colonne.

1. Structure de grille de base

Pour commencer à utiliser Grid, appliquez display: grid au conteneur.

• Exemple :

  .grid-container {
    display: grid;
  }

Une fois display : grid appliqué, les éléments enfants du conteneur deviennent des éléments de grille.

2. Définir les colonnes et les lignes de la grille

Vous pouvez définir le nombre de lignes et de colonnes de votre grille à l'aide des propriétés grid-template-columns et grid-template-rows.

• Exemple : Création d'une grille avec 3 colonnes et 2 lignes.

  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 50px 150px;
  }

Cela créera une grille avec :

• 3 colonnes : la première colonne mesure 100 px de large, la seconde mesure 200 px et la troisième mesure 100 px.
• 2 lignes : la première ligne mesure 50 px de haut et la seconde mesure 150 px.

3. Utiliser des unités fractionnaires (fr)

CSS Grid introduit l'unité fractionnaire fr, qui représente une fraction de l'espace disponible dans le conteneur de grille. Il s'agit d'un moyen flexible d'attribuer de l'espace entre les éléments de la grille.

• Exemple : Utiliser fr pour diviser l'espace de manière égale.

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

Dans cet exemple, les trois colonnes auront des largeurs égales, chacune occupant une fraction de l'espace disponible.

4. Placer des éléments de grille

Vous pouvez contrôler l'emplacement de chaque élément de la grille à l'aide des propriétés de colonne de grille et de ligne de grille. Ces propriétés vous permettent de spécifier les positions de début et de fin des éléments.

• Exemple :

  .grid-item {
    grid-column: 1 / 3; /* This item spans from column 1 to column 3 */
    grid-row: 1 / 2;    /* This item is placed in the first row */
  }

Dans ce cas, l'élément de grille s'étendra sur les deux premières colonnes mais sera placé dans la première ligne.

5. Écart de grille

La propriété grid-gap ajoute de l'espace entre les éléments de la grille, à la fois horizontalement et verticalement.

• Exemple : Ajout d'espaces entre les colonnes et les lignes.

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }

Cela crée des écarts égaux de 20 px entre tous les éléments de la grille.

6. Ajustement automatique et remplissage automatique

L'ajustement automatique et le remplissage automatique sont des fonctionnalités puissantes qui permettent à la grille de placer automatiquement autant de colonnes que possible, en fonction de la taille du conteneur.

• Exemple d'ajustement automatique :

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }

Ici, la grille s'adaptera automatiquement à autant de colonnes que possible, garantissant que chaque colonne mesure au moins 100 px de large mais peut s'agrandir pour remplir l'espace disponible.

Exemple pratique : une disposition de grille simple

Créons une disposition de grille simple avec CSS Grid.

HTML :

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS :

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

Dans cet exemple :

• Le .grid-container comporte trois colonnes de largeur égale créées à l'aide de repeat(3, 1fr).
• L'espacement de la grille est défini sur 10 px pour ajouter de l'espace entre les éléments de la grille.
• Chaque élément .grid a un remplissage et une couleur d'arrière-plan appliqués pour une meilleure visibilité.

7. Grilles imbriquées

Vous pouvez également imbriquer des grilles, où un élément de grille devient lui-même un conteneur de grille. Cela permet des mises en page plus complexes.

• Exemple :

  .nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }

Vous pouvez appliquer ce concept pour créer une grille à l'intérieur d'une autre grille pour un contrôle plus granulaire de votre mise en page.

Responsive Design with CSS Grid

CSS Grid is great for responsive design. You can adjust the number of columns based on the screen size using media queries.

• Example: Creating a responsive grid.

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  @media screen and (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }

In this example:

• The grid starts with three columns.
• On screens smaller than 768px, the grid switches to two columns.
• On screens smaller than 480px, the grid collapses to a single column.

Practice Exercise

1. Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
2. Use grid-template-columns and grid-template-rows to define the grid structure.
3. Make the layout responsive by adjusting the number of columns on different screen sizes.

Next Up: In the next lecture, we’ll explore Advanced CSS Grid Techniques, including grid areas, template layouts, and combining Grid with Flexbox. Stay tuned!

Follow Me on LinkedIn-

Ridoy Hasan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!