CSS Grid permet de construire une mise en page avec de vraies colonnes et de vraies lignes. Dans ce cours, nous allons avancer pas à pas pour comprendre comment créer une grille, y placer des blocs puis gérer leurs alignements.
Intérêt et introduction à la propriété grid
Quand on veut organiser une page en plusieurs colonnes et plusieurs lignes, Grid est souvent l'outil le plus clair. Au lieu de bricoler des largeurs ou d'empiler des astuces, on dit simplement au navigateur : cet élément devient une grille.
Une fois cette grille créée, on peut décider combien de colonnes elle contient, combien de lignes elle utilise et où chaque bloc doit se placer.
C'est ce qui fait la force de Grid : on pense en mise en page, pas seulement en alignement sur une seule ligne.
À retenir avant de commencer
Si vous voulez surtout aligner des éléments sur une seule ligne ou une seule colonne, Flexbox est souvent plus simple. Grid devient très intéressant dès que la mise en page travaille en deux dimensions.
La différence entre le grid container et le grid item
Comme avec Flexbox, il faut d'abord distinguer le parent et les enfants.
-
Le grid container est l'élément parent qui reçoit
display: grid;. - Les grid items sont ses enfants directs.
Ce point est très important : seuls les enfants directs deviennent des items de la grille.
Pour bien le voir, prenons une grille un peu plus riche, avec plusieurs colonnes, plusieurs lignes, et certains blocs qui occupent plusieurs cellules.
<div class="grille">
<div class="grand">Bloc 1</div>
<div>Bloc 2</div>
<div>Bloc 3</div>
<div class="haut">Bloc 4</div>
<div>Bloc 5</div>
<div>Bloc 6</div>
</div>
.grille{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 10px;
}
.grand{
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.haut{
grid-row: 2 / 4;
}
Dans cet exemple, la balise qui entoure tous les blocs est le grid container. Tous les blocs colorés sont des grid items.
Certains items restent dans une seule cellule, mais d'autres s'étendent sur plusieurs colonnes ou plusieurs lignes. Cela ne change pas leur nature : ce sont toujours des items de la grille, simplement placés différemment.
Créer une grille avec grid-template-columns et grid-template-rows
Pour créer une grille, on commence souvent avec grid-template-columns. Cette propriété définit le nombre et la taille des colonnes.
On peut ensuite utiliser grid-template-rows pour contrôler la hauteur des lignes.
<div class="grille">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
.grille{
display: grid;
grid-template-columns: 150px 150px 150px;
grid-template-rows: 80px 80px;
}
Ici, nous avons créé trois colonnes de 150px et deux lignes de 80px. Le navigateur place ensuite les items dans les cases disponibles, de gauche à droite puis de haut en bas.
Pour définir la taille des colonnes et des lignes, grid-template-columns et grid-template-rows acceptent plusieurs types de valeurs. Il faut bien distinguer les unités classiques du CSS et les valeurs propres au système Grid.
Côté unités de longueur, on peut notamment utiliser :
-
pxpour une taille fixe, -
%pour une taille proportionnelle à l'espace disponible, -
empour une taille liée à la taille du texte de l'élément, -
rempour une taille liée à la taille du texte racine, -
vwpour une taille liée à la largeur de la fenêtre, -
vhpour une taille liée à la hauteur de la fenêtre.
Grid ajoute aussi des valeurs très utiles :
-
frpour partager l'espace restant, -
autopour laisser le navigateur calculer la taille, -
min-contentpour prendre la plus petite taille possible, -
max-contentpour prendre la taille nécessaire au contenu sans le casser, -
fit-content()pour limiter une piste à une certaine largeur, -
minmax()pour définir une taille minimale et maximale.
On peut aussi utiliser la fonction repeat() pour éviter de répéter plusieurs fois la même valeur, par exemple repeat(3, 1fr).
En pratique, pour débuter, les valeurs les plus utiles à retenir sont surtout px, %, fr, auto et minmax().
On rencontre aussi très souvent fr. Cette unité propre à Grid permet de partager l'espace disponible entre plusieurs colonnes ou plusieurs lignes.
.grille{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
Dans cet exemple, la colonne du milieu prendra deux fois plus de place que les deux autres.
Pour un débutant, c'est une excellente manière de penser les colonnes : plutôt que de tout calculer, on répartit l'espace.
.grille{
display: grid;
grid-template-columns: 200px 1fr minmax(120px, 300px);
grid-template-rows: auto 20vh;
}
Ici, on mélange une colonne fixe en pixels, une colonne flexible en fr, une colonne limitée avec minmax(), puis une ligne automatique et une ligne définie avec l'unité vh.
Fusionner plusieurs cellules
Une fois la grille créée, on peut demander à un item d'occuper plusieurs colonnes ou plusieurs lignes. C'est ce qui donne l'impression de fusionner plusieurs cellules.
Pour cela, on utilise surtout grid-column et grid-row.
-
grid-columnindique sur quelles colonnes l'item doit s'étendre, -
grid-rowindique sur quelles lignes il doit s'étendre.
On travaille avec les lignes de la grille. Par exemple, grid-column: 1 / 3; veut dire : l'élément commence à la ligne de colonne 1 et s'arrête à la ligne de colonne 3. Il occupe donc deux colonnes.
<div class="grille">
<div class="grand">Bloc 1</div>
<div>Bloc 2</div>
<div>Bloc 3</div>
<div class="haut">Bloc 4</div>
<div>Bloc 5</div>
</div>
.grille{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 10px;
}
.grand{
grid-column: 1 / 3;
}
.haut{
grid-row: 2 / 4;
}
Dans cet exemple, le Bloc 1 s'étale sur deux colonnes grâce à grid-column: 1 / 3;. Le Bloc 4, lui, s'étale sur deux lignes grâce à grid-row: 2 / 4;.
Il est aussi possible de combiner les deux sur un même item pour lui faire occuper une zone plus grande dans la grille.
Aller plus loin avec grid-template-areas
Quand une mise en page commence à ressembler à un vrai gabarit de page, grid-template-areas devient très pratique. Cette propriété permet de donner un nom à des zones.
On décrit alors la grille avec des mots comme header, sidebar, content ou footer. Cela rend le code beaucoup plus lisible.
<div class="page">
<header>En-tête</header>
<aside>Menu</aside>
<main>Contenu</main>
<footer>Pied de page</footer>
</div>
.page{
display: grid;
grid-template-columns: 200px 1fr;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
gap: 10px;
}
header{ grid-area: header; }
aside{ grid-area: sidebar; }
main{ grid-area: content; }
footer{ grid-area: footer; }
La force de cette approche, c'est qu'on voit presque la mise en page directement dans le CSS.
Attention ! Les noms utilisés dans grid-template-areas doivent correspondre exactement aux valeurs données à grid-area.
Alignement des items dans la grille
Une fois la grille créée, on peut choisir comment les items se placent à l'intérieur de chaque case. C'est ici qu'interviennent justify-items et align-items.
Alignement horizontal avec justify-items
La propriété justify-items gère l'alignement horizontal des items dans leur cellule.
.grille{
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
}
Avec la valeur center, chaque item se centre horizontalement dans sa case. Sans cela, le comportement par défaut est souvent de remplir toute la largeur disponible.
Alignement vertical avec align-items
La propriété align-items fait la même chose, mais cette fois sur l'axe vertical.
.grille{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 120px;
align-items: center;
}
Ici, les items ne restent pas collés en haut de leur cellule. Ils se placent au milieu sur la hauteur.
Alignement de la grille
Il ne faut pas confondre l'alignement des items avec l'alignement de la grille elle-même dans son conteneur. Pour cela, on utilise surtout justify-content et align-content.
Alignement horizontal avec justify-content
La propriété justify-content sert quand la grille est plus petite que l'espace disponible en largeur. Elle permet par exemple de la centrer.
.grille{
display: grid;
grid-template-columns: 120px 120px 120px;
justify-content: center;
}
Cette fois, ce n'est pas le contenu des cases qui bouge. C'est toute la grille qui se déplace horizontalement.
Alignement vertical avec align-content
La propriété align-content suit le même principe sur la hauteur. Elle est utile quand le container est plus haut que la grille.
.grille{
display: grid;
grid-template-columns: repeat(2, 120px);
grid-template-rows: 60px 60px;
height: 240px;
align-content: center;
}
On voit ici que la grille entière se place au centre de la zone haute, au lieu de rester collée en haut.
Gérer les goutières avec gap
Quand une grille fonctionne, il faut encore gérer l'espace entre les cellules. C'est le rôle de gap.
Cette propriété définit l'écart entre les colonnes et entre les lignes. Elle évite d'ajouter des marges partout sur les items.
.grille{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grille{
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 30px;
row-gap: 10px;
}
Le résultat est plus propre et plus facile à maintenir. Si vous devez changer l'espacement, il suffit de modifier une seule propriété.
Comme beaucoup de propriétés de taille ou d'espacement, gap accepte plusieurs unités utiles selon les cas :
- px pour un écart fixe,
- % pour un écart proportionnel,
- em ou rem pour un espacement lié à la taille du texte.
Si vous débutez, retenez surtout ceci : Grid sert à dessiner une structure en lignes et en colonnes. Commencez par identifier le container, définissez les colonnes avec grid-template-columns, ajoutez si besoin les lignes, puis ajustez les alignements et les goutières.