Qu'est-ce que CSS Grid?

La mise en page en grille CSS (ou simplement CSS Grid) est un système de disposition bidimensionnel en CSS. Elle permet de gérer le placement des éléments à la fois en lignes (horizontales) et en colonnes (verticales), créant des structures de grille complexes pour construire des interfaces.

Les concepts principaux de CSS Grid incluent :

• Conteneur de grille : Élément auquel on applique la propriété display: grid ou display: inline-grid. Les descendants de cet élément deviennent des éléments de grille.
• Éléments de grille : Les descendants directs du conteneur de grille.
• Lignes de grille : Lignes de séparation formant la grille. Elles peuvent être nommées ou avoir un indice numérique.
• Pistes de grille : L'espace entre deux lignes de la grille, qui peut être une colonne ou une ligne.
• Cellules de grille : La plus petite unité de la grille, formée par l'intersection d'une ligne et d'une colonne.
• Zones de grille : Une région rectangulaire de la grille occupant une ou plusieurs cellules.

Les propriétés clés pour travailler avec CSS Grid incluent :

Pour le conteneur :

• display: grid | inline-grid;
• grid-template-columns : Définit les colonnes de la grille.
• grid-template-rows : Définit les lignes de la grille.
• grid-template-areas : Définit des zones nommées de la grille.
• gap | row-gap | column-gap : Définit les espaces entre les cellules.
• justify-items | align-items | place-items : Alignement du contenu à l'intérieur des cellules selon les axes principal et transversal.
• justify-content | align-content | place-content : Alignement des pistes de la grille à l'intérieur du conteneur.

Pour les éléments (éléments de grille) :

• grid-column-start | grid-column-end | grid-column : Détermine quelles lignes de colonne l'élément occupe.
• grid-row-start | grid-row-end | grid-row : Détermine quelles lignes de rangée l'élément occupe.
• grid-area : Attribue à l'élément une zone nommée de la grille ou définit sa position à l'aide de lignes.
• justify-self | align-self | place-self : Alignement de l'élément lui-même à l'intérieur de sa cellule.

CSS Grid offre des outils puissants pour créer des mises en page adaptatives et complexes, simplifiant considérablement les tâches qui nécessitaient auparavant l'utilisation de float, inline-block ou positionnement absolu.

.container {
  display: grid; /* Rend l'élément un conteneur de grille */
  grid-template-columns: 1fr 1fr 1fr; /* Crée 3 colonnes de largeur égale */
  grid-template-rows: auto auto; /* Crée 2 lignes avec une hauteur automatique */
  gap: 10px; /* Ajoute des espaces entre les cellules */
}

.item {
  /* Les éléments à l'intérieur du conteneur deviennent automatiquement des éléments de grille */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Le premier élément occupe les colonnes 1 à 3 */
}