Une grille CSS est définie en utilisant la valeur grid de la propriété display ; vous pouvez définir les colonnes et les lignes de votre grille en utilisant les propriétés grid-template-rows et grid-template-columns.

La grille que vous définissez avec ces propriétés est décrite comme une grille explicite.

Si vous placez du contenu en dehors de cette grille explicite, ou si vous comptez sur le placement automatique, l'algorithme de grille doit créer une tracks (pistes) de ligne ou de colonne supplémentaire pour contenir grid items (éléments de grille), des pistes supplémentaires seront alors créées dans la grille implicite. La grille implicite est la grille créée automatiquement en raison de l'ajout de contenu en dehors des pistes définies.

Dans l'exemple ci-dessous, nous avons créé une grille explicite de 3 colonnes et 2 lignes. La troisième ligne de la grille est une piste de ligne de grille implicite, formée en raison des 2 éléments en plus, par rapport aux 6 qui remplissent les pistes explicites.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>

En apprendre plus

Références de la propriété

En lire plus

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : loella16
 Dernière mise à jour par : loella16,