Introduction au mode d'affichage par grille en CSS (v1)
Il ne s'agit pas d'illustrer chaque valeur de chaque propriété, mais d'illustrer les principales propriétés à l'aide de certaines de leurs valeurs.
The grid is an intersecting set of horizontal and vertical grid lines that divides the grid container’s space into grid areas, into which grid items (representing the grid container’s content) can be placed.
Exemple de base
.grid {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 50px 75px;
}
Exemple de base utilisant un modèle défini avec grid-template-rows et grid-template-columns. Les éléments sont positionnés dans l'ordre dans lequel ils apparaissent dans le flux des éléments du document, d'abord en lignes, puis en colonnes.
<div class="grid">
<div>(1, 1)</div>
<div>(1, 2)</div>
<div>(2, 1)</div>
<div>(2, 2)</div>
</div>
(1, 1)
(1, 2)
(2, 2)
(2, 1)
Chaque élément peut être disposé dans une cellule donnée avec grid-row et grid-column, ce qui permet d'en contrôler le positionnement indépendamment du flux.
<div class="grid">
<div style="grid-row:2;grid-column:2">(2, 2)</div>
<div style="grid-row:1;grid-column:2">(1, 2)</div>
<div style="grid-row:2;grid-column:1">(2, 1)</div>
<div style="grid-row:1;grid-column:1">(1, 1)</div>
</div>
(2, 2)
(1, 2)
(2, 1)
(1, 1)
Nommage et répétition dans le modèle
Les rangées et les lignes peuvent être nommées pour y faire référence plus facilement que par leurs coordonnées. Aussi, repeat () permet de limiter la répétition de leur défition.
.grid {
display: grid;
grid-template-columns: 100px repeat(2, [some-column] 150px);
grid-template-rows: [the-top] 50px repeat(2, 25px);
}
<div class="grid">
<div style="grid-row:the-top;grid-column:some-column">(1, 2)</div>
<div style="grid-row:3;grid-column:some-column 2">(3, 3)</div>
<div style="grid-row:the-top;grid-column:some-column 2">(1, 3)</div>
<div style="grid-row:3;grid-column:some-column">(3, 2)</div>
<div style="grid-row:2;grid-column:1">(2, 1)</div>
<div style="grid-row:3;grid-column:1">(3, 1)</div>
<div style="grid-row:the-top;grid-column:1">(1, 1)</div>
<div style="grid-row:2;grid-column:some-column">(2, 2)</div>
<div style="grid-row:2;grid-column:some-column 2">(2, 3)</div>
</div>
(1, 2)
(3, 3)
(1, 3)
(3, 2)
(2, 1)
(3, 1)
(1, 1)
(2, 2)
(2, 3)
Fusion
Comme <rowspan> et <colspan> le permettent dans un <td>, il est possible de fusionner des rangées et des lignes.
.grid {
display: grid;
grid-template-columns: 100px 150px 200px;
grid-template-rows: 25px 50px 75px;
}
Notation extensive avec grid-row-start / grid-row-end et grid-column-start / grid-column-end.
<div class="grid">
<div >style="grid-row-start:2;grid-row-end:-1;grid-column-start:1;grid-column-end:1">Left</div>
<div >style="grid-row-start:1;grid-row-end:-2;grid-column-start:3;grid-column-end:3">Right</div>
<div >style="grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:-2">Top</div>
<div >style="grid-row-start:3;grid-row-end:3;grid-column-start:2;grid-column-end:-1">Bottom</div>
<div >style="grid-row-start:2;grid-row-end:2;grid-column-start:2;grid-column-end:2">Center</div>
&tl;/div>
Left
Right
Top
Bottom
Center
Notation raccourcie avec grid-row et grid-column.
<div class="grid">
<div style="grid-row:2 / -1;grid-column:1">Left</div>
<div style="grid-row:1 / -2;grid-column:3">Right</div>
<div style="grid-row:1;grid-column:1 / -2">Top</div>
<div style="grid-row:3;grid-column:2 / -1">Bottom</div>
<div style="grid-row:2;grid-column:2">Center</div>
&tl;/div>
Left
Right
Top
Bottom
Center
Idem, mais en spécifiant sur combien de rangées ou colonnes une zone s'étale avec span, plutôt qu'avec des indices négatifs.
<div class="grid">
<div style="grid-row:2 / span 2;grid-column:1">Left</div>
<div style="grid-row:1 / span 2;grid-column:3">Right</div>
<div style="grid-row:1;grid-column:1 / span 2">Top</div>
<div style="grid-row:3;grid-column:2 / span 2">Bottom</div>
<div style="grid-row:2;grid-column:2">Center</div>
</div>
Left
Right
Top
Bottom
Center
Zones
Un découpage en zones peut être superposé au découpage en cellules. Cela permet une notation simplifiée à base de grid-area s'appuyant sur une déclaration implicite de zones avec grid-template-areas.
.grid {
display: grid;
grid-template-columns: 100px 150px 200px;
grid-template-rows: 25px 50px 75px;
grid-template-areas: "areaTop areaTop areaRight"
"areaLeft areaCenter areaRight"
"areaLeft areaBottom areaBottom";
}
<div class="grid">
<div class="cell" style="grid-area:areaLeft">Left</div>
<div class="cell" style="grid-area:areaRight">Right</div>
<div class="cell" style="grid-area:areaTop">Top</div>
<div class="cell" style="grid-area:areaBottom">Bottom</div>
<div class="cell" style="grid-area:areaCenter">Center</div>
</div>
Left
Right
Top
Bottom
Center
Notation raccourcie avec grid-template.
.grid {
display: grid;
grid-template: "areaTop areaTop areaRight" 25px
"areaLeft areaCenter areaRight" 50px
"areaLeft areaBottom areaBottom" 75px
/ 100px 150px 200px;
}
Left
Right
Top
Bottom
Center
Notation encore plus raccourcie avec grid.
.grid {
display: grid;
grid: "areaTop areaTop areaRight" 25px
"areaLeft areaCenter areaRight" 50px
"areaLeft areaBottom areaBottom" 75px
/ 100px 150px 200px;
}
Left
Right
Top
Bottom
Center
Alignement des éléments dans les zones
.grid {
display: grid;
grid-template-columns: 100px 150px 200px;
grid-template-rows: 25px 50px 75px;
grid-template-areas: "areaTop areaTop areaRight"
"areaLeft areaCenter areaRight"
"areaLeft areaBottom areaBottom";
}
L'ensemble des éléments peuvent être alignés horizontalement et verticalement dans leurs zones respectives avec justify-items et align-items, respectivement. Noter que l'alignement par défaut est stretch, où l'élément est étiré pour occuper toute la surface de sa zone, ce qui explique tous les rendus précédents.
<div class="grid" style="align-items:center;justify-items:center">
<div style="grid-area:areaLeft">Left</div>
<div style="grid-area:areaRight">Right</div>
<div style="grid-area:areaTop">Top</div>
<div style="grid-area:areaBottom">Bottom</div>
<div style="grid-area:areaCenter">Center</div>
</div>
Left
Right
Top
Bottom
Center
Un élément peut être aligné horizontalement et verticalement dans sa zone avec justify-self et align-self, respectivement.
<div class="grid" style="align-items:center;justify-items:center">
<div style="grid-area:areaLeft;align-self:end">Left</div>
<div style="grid-area:areaRight;align-self:center">Right</div>
<div style="grid-area:areaTop;align-self:start">Top</div>
<div style="grid-area:areaBottom;justify-self:start">Bottom</div>
<div style="grid-area:areaCenter;justify-self:end">Center</div>
</div>
Left
Right
Top
Bottom
Center
Alignement des cellules dans la grille
.grid {
display: grid;
grid-template-columns: 100px 50px;
grid-template-rows: 50px 75px;
width: 200px;
height: 200px;
}
Quand les dimensions du conteneur sont plus grandes que celles de la grille (ici, le conteneur fait 200 pixels de côté, mais il contient une grille de 100 + 50 = 150 pixels de largeur et 50 + 75 = 125 pixels de hauteur), les cellules peuvent être alignées (plus exactement, distribuées) horizontalement et verticalement dans le conteneur avec justify-content et align-content, respectivement.
<div class="grid" style="justify-content:center;align-content:center">
<div class="cell">(1, 1)</div>
<div class="cell">(1, 2)</div>
<div class="cell">(2, 1)</div>
<div class="cell">(2, 2)</div>
</div>
(1, 1)
(1, 2)
(2, 1)
(2, 2)
Idem, mais cette fois en demandant une des distributions possibles de l'espace entre les cellules avec une des valeurs possibles (space-around,space-between, space-evenly).
<div class="grid" style="justify-content:space-around;align-content:space-evenly">
<div class="cell">(1, 1)</div>
<div class="cell">(1, 2)</div>
<div class="cell">(2, 1)</div>
<div class="cell">(2, 2)</div>
</div>
(1, 1)
(1, 2)
(2, 1)
(2, 2)
Dans le cas de space-around, l'espace entre le bord gauche du conteneur et la première cellule, ainsi que l'espace entre la dernière cellule et le bord droit du conteneur, correspondent à la moitié de l'espace entre deux cellules consécutives. Dans le cas de space-between, ces espaces sont réduits à 0. Dans le cas space-evenly, ces espaces existent, mais tous les espaces sont égaux.
Noter qu'il est bien question de cellules et non de zones. Lorsqu'elle s'étendent sur plusieurs cellules, les zones peuvent être déformées par ce processus.
.grid {
background-color: yellow;
display: grid;
grid-template-columns: 50px 50px 50px;
grid-template-rows: 50px 50px 50px;
grid-template-areas: "areaTop areaTop areaRight"
"areaLeft areaCenter areaRight"
"areaLeft areaBottom areaBottom";
width: 800px;
height: 200px;
}
<div class="grid" style="justify-content:space-around;align-content:space-evenly">
<div class="cell" style="grid-area:areaLeft">Left</div>
<div class="cell" style="grid-area:areaRight">Right</div>
<div class="cell" style="grid-area:areaTop">Top</div>
<div class="cell" style="grid-area:areaBottom">Bottom</div>
<div class="cell" style="grid-area:areaCenter">Center</div>
</div>
Left
Right
Top
Bottom
Center
Espacement des cellules
L'espacement horizontal et vertical des cellules est spécifié avec column-gap et row-gap.
.grid {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 50px 75px;
}
<div class="grid" style="row-gap:10px;column-gap:50px">
<div class="cell">(1, 1)</div>
<div class="cell">(1, 2)</div>
<div class="cell">(2, 1)</div>
<div class="cell">(2, 2)</div>
</div>
(1, 1)
(1, 2)
(2, 1)
(2, 2)
Ajustement automatique sur requête média
Le style définissant une grille peut être modifié en fonction d'une combinaison de multiples caractéristiques du média. Par exemple, selon que la largeur de l'écran est de plus ou moins 400px à l'aide d'une at-rule @media. Pour information, voici ce que représente la largeur de 400px :
@media (width >= 400px) {
.grid5 {
display: grid;
grid-template-areas: "A B" "C C";
}
}
@media (width < 400px) {
.grid5 {
display: grid;
grid-template-areas: "A" "B" "C";
}
}
<div class="grid5">
<div style="grid-area:A">A</div>
<div style="grid-area:B">B</div>
<div style="grid-area:C">C</div>
</div>
Modèle de disposition du conteneur
Par défaut, un <div> conteneur s'étale sur toute la largeur de l'élément qui le contient (d'où la bande jaune traversant l'écran dans les exemples précédents). Le modèle de disposition du conteneur peut être spécifié à inline-grid pour que la largeur <div> soit limitée à son contenu.
.grid {
display: inline-grid;
grid-template-columns: 100px 200px;
grid-template-rows: 50px 75px;
}
<div class="grid">
<div >(1, 1)</div>
<div >(1, 2)</div>
<div >(2, 1)</div>
<div >(2, 2)</div>
</div>
(1, 1)
(1, 2)
(2, 1)
(2, 2)
Grille implicite
Une grille est implicite quand sa définition ne contient pas d'informations sur son modèle. Les seules informations fournies sont la largeur des colonnes et la hauteur des rangées par défaut, avec grid-auto-columns et grid-auto-rows.
.grid {
display:grid;
grid-auto-columns:100px;
grid-auto-rows:50px;
}
Grille implicite où la disposition de chaque élément est spécifiée.
<div class="grid">
<div style="grid-row:1 / span 2;grid-column:1">A</div>
<div style="grid-row:1;grid-column:2">B</div>
<div style="grid-row:2;grid-column:2">C</div>
</div>
Contrôle du placement
grid-auto-flow permet de demander à ce que les éléments soient disposés en remplissant une rangée puis la suivante, ou une colonne puis la suivante, et/ou de manière dense.
Soit donc rangée après rangée (par défaut) :
.grid {
display:grid;
grid-template-columns:repeat(2,auto);
}
<div class="grid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>
Soit donc colonne après colonne :
.grid {
display:grid;
grid-auto-flow: column;
grid-template-rows:repeat(2,auto);
}
<div clas="grid">
<div>A</div>
<div>B</div>
<div>C</div>
<div>D</div>
</div>