Dans unegrille CSS, unecellule de grille est la plus petite unité de la grille. C'est l'espace créé entre 4 intersections delignes de grille. D'une certaine façon, une cellule de grille est assimilable à une cellule de tableau.

Si vous ne placez pas d'éléments à l'aide de l'une des méthodes de placement de grille, les enfants directs du conteneur de grille seront placés individuellement dans chaque cellule de la grille par l'algorithme de placement automatique. Despistes de ligne ou de colonne supplémentaires seront créées afin d'obtenir suffisamment de cellules pour contenir tous les éléments.

Exemple

Dans l'exemple, nous avons créé une grille de trois colonnes. Les cinq éléments sont placés dans des cellules de la grille le long d'une rangée initiale de trois cellules de la grille, puis par l'ajout d'une nouvelle ligne pour les deux autres.

* {  box-sizing: border-box;}.wrapper {  border: 2px solid #f76707;  border-radius: 5px;  background-color: #fff4e6;}.wrapper > div {  border: 2px solid #ffa94d;  border-radius: 5px;  background-color: #ffd8a8;  padding: 1em;  color: #d9480f;}

.wrapper {  display: grid;  grid-template-columns: repeat(3, 1fr);  grid-auto-rows: 100px;}

<div>  <div>Un</div>  <div>Deux</div>  <div>Trois</div>  <div>Quatre</div>  <div>Cinq</div></div>

Voir aussi

• Les propriétés CSS portant sur les cellules de grille :
  • grid-template-columns
  • grid-template-rows
  • grid-auto-rows
  • grid-auto-columns
• Les concepts de base des grilles CSS
• Définition des cellules de grille dans la spécification CSS^(angl.)