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 :

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

#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.