Introduction
L'utilisation des grilles permet de faciliter l'organisation du document html.
Pourquoi utiliser display:grid ?
- Pour créer facilement le layout du document
- Pour avoir un layout adaptable au device au sein duquel s'ouvre la page (RWD)
- Pour créer des galerie d'images aisément
Une première grille
display:grid donne à la balise un comportement grid.
grid-template-columns définit des colonnes.
grid-template-rows définit des lignes.
grid-template la propriété raccourcie pour définir les colonnes et les lignes.
grid-template-gap définit des espaces entre les cellules de la grille.
C'est l'élément auquel on attribue le display:grid qui va piloter la grille.
Seuls les enfants directs de cette balise seront positionnés selon la grille définie dans le premier parent.
Démo
<head>
<meta charset="UTF-8">
<style>
.carte{
background-color:salmon;
border:solid 1px #9ca3af;
border-radius:5px;
}
.grille{
display:grid;
grid-gap:5px; /*grid-gap:5px 10px*/
grid-template-columns:100px 100px 100px;
grid-template-rows:auto auto;
/*grid-template:auto auto/100px 100px 100px;*/
}
</style>
</head>
<body>
<div class=grille>
<div class="carte">1</div>
<div class="carte">2</div>
<div class="carte">3</div>
<div class="carte">4</div>
<div class="carte">5</div>
<div class="carte">6</div>
<div class="carte">7</div>
</div>
</body>
On constate:
- nous avons défini une grille de trois colonnes et 2 lignes
- comme il n'y a pas assez de place pour placer les 7 éléments, grid a rajouté 2 lignes dynamiquement
- les items se sont répartis dans l'ordre du DOM, de gauche à droite et de haut en bas
- chaque item prend la place maximum sur la largeur et la hauteur d'une cellule de la grille
- dans l'inspecteur le mot grid est apparu à côté de la balise de display grid
- dans l'inspecteur, au survol de la balise de display grid, on voit clairement la grille se dessiner
repeat(), minmax() et grid-auto-flow
repeat(taille,nombre) permet d'abréger l'écriture du nombre des colonnes et des rangées.
minmax() permet de fixer la largeur (ou la hauteur mais c'est plus rare) des cellules de la grille.
grid-auto-flow permet d'orienter le remplissage automatique de la grille en lignes (row) ou en colonnes (column), par défaut c'est row.
Démo
<head>
<meta charset="UTF-8">
<style>
.carte{
background-color:salmon;
border:solid 1px #9ca3af;
border-radius:5px;
}
.grille{
display:grid;
grid-gap:5px;
grid-template-columns:repeat(3,1fr); /*repeat(3,minmax(100px,1fr))*/
grid-template-rows:auto auto;
grid-auto-flow:row; /*voir avec la valeur column*/
}
</style>
</head>
<body>
<div class=grille>
<div class="carte">1</div>
<div class="carte">2</div>
<div class="carte">3</div>
<div class="carte">4</div>
<div class="carte">5</div>
<div class="carte">6</div>
<div class="carte">7</div>
</div>
</body>
On constate:
- repeat() permet de simplifier le code
- grid-auto-flow permet d'orienter le remplissage implicite selon les lignes ou les colonnes
- repeat(3,minmax(100px,1fr) permet d'avoir une largeur de cellule de minimum 100px et maximum 1 fraction
- la valeur auto pour les colonnes permet d'avoir une hauteur de cellule variable en fonction de la taille de son contenu
Commande raccourcie
grid-template permet de créer des lignes et des colonnes en une seule commande.
Syntaxe / Exemple
.container{
grid-template: auto auto / 1fr 1fr 1fr;
}
On constate:
- d'abord les lignes
- le / permet de séparer les déclarations des lignes et des colonnes
- ensuite les colonnes
La liberté des unités est bien sûr de mise.
Rappel repeat()
repeat() permet de répéter un modèle de lignes et/ou de colonnes.
Exemples:
| grid-template-columns : repeat(12,1fr); |
|
on répète 12 fois une colonne de une fraction |
| grid-template-columns : 200 px repeat(5,1fr) 300px ; |
|
7 colonnes: une de 200px,5 de une fraction, une de 300px. |
| grid-template-rows : repeat(5,1fr) 100px ; |
|
6 lignes: 5 de une fraction, une de 100px de hauteur. |
Les gouttières
column-gap et row-gap permettent de créer des gouttières.
grid-gap pour la commande raccourcie.
Toutes les unités sont autorisées, on utilise souvent les unité relatives à la taille de la plice de caractères em pour créer les gouttières.
