Introduction aux grilles CSS

Les grilles CSS représentent un moyen de placer des éléments à la fois horizontalement et verticalement. C'est une méthode plus avancée comparée aux flexboxes, mais plus complexe à maîtriser.

Pour créer une grille, vous devez définir la propriété display sur la valeur grid :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
}

Après cela, l'élément se transformera en une grille bidimensionnelle dans laquelle les éléments sont disposés verticalement (colonnes) et horizontalement (lignes). La zone à l'intersection d'une colonne et d'une ligne est appelée cellule.

A l'aide de propriétés spécifiques, il sera possible de placer des éléments à la fois par lignes et par colonnes. Cela permettra de créer facilement, par exemple, des choses comme ceci :

Dans les prochaines leçons, nous commencerons par étudier le placement des éléments par colonnes, puis nous passerons à l'étude des lignes, et après nous combinerons tout cela ensemble.