Élément de grille CSS
1
2
3
4
5
Éléments enfants (articles)
Un conteneur de grille contient des éléments de grille .
Par défaut, un conteneur a un élément de grille pour chaque colonne, dans chaque ligne, mais vous pouvez styliser les éléments de grille afin qu'ils s'étendent sur plusieurs colonnes et/ou lignes.
La propriété grid-column :
La grid-columnpropriété définit sur quelle(s) colonne(s) placer un élément.
Vous définissez où l'élément commencera et où l'élément se terminera.
1
2
3
4
5
6
sept
8
9
dix
11
12
13
14
15
Remarque : La grid-columnpropriété est une propriété abrégée pour les grid-column-startpropriétés et grid-column-end.
Pour placer un élément, vous pouvez vous référer aux numéros de ligne ou utiliser le mot-clé "span" pour définir le nombre de colonnes sur lesquelles l'élément s'étendra.
Exemple
Faites en sorte que "item1" commence sur la colonne 1 et se termine avant la colonne 5 :
.item1 {
grid-column: 1 / 5;
}
Exemple
Faites en sorte que "item1" commence sur la colonne 1 et s'étende sur 3 colonnes :
.item1 {
grid-column: 1 / span 3;
}
Exemple
Faites en sorte que "item2" commence sur la colonne 2 et s'étende sur 3 colonnes :
.item2 {
grid-column: 2 / span 3;
}
La propriété grid-row :
La grid-rowpropriété définit sur quelle ligne placer un élément.
Vous définissez où l'élément commencera et où l'élément se terminera.
1
2
3
4
5
6
sept
8
9
dix
11
12
13
14
15
16
Remarque : La grid-rowpropriété est une propriété abrégée pour les grid-row-startpropriétés et grid-row-end.
Pour placer un élément, vous pouvez vous référer aux numéros de ligne ou utiliser le mot-clé "span" pour définir le nombre de lignes que l'élément couvrira :
Exemple
Faites en sorte que "item1" commence sur la ligne de ligne 1 et se termine sur la ligne de ligne 4 :
.item1 {
grid-row: 1 / 4;
}
Exemple
Faites en sorte que "item1" commence sur la ligne 1 et s'étende sur 2 lignes :
.item1 {
grid-row: 1 / span 2;
}
La propriété grid-area
La grid-areapropriété peut être utilisée comme propriété abrégée pour les
propriétés grid-row-start, grid-column-startet .grid-row-endgrid-column-end
1
2
3
4
5
6
sept
8
9
dix
11
12
13
14
15
Exemple
Faites en sorte que "item8" commence sur la ligne de ligne 1 et la ligne de colonne 2, et se termine sur la ligne de ligne 5 et la ligne de colonne 6 :
.item8 {
grid-area: 1 / 2 / 5 / 6;
}
Exemple
Faites en sorte que "item8" commence sur la ligne de ligne 2 et la ligne de colonne 1, et s'étende sur 2 lignes et 3 colonnes :
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}
Nommer les éléments de la grille
La grid-areapropriété peut également être utilisée pour attribuer des noms aux éléments de la grille.
Entête
Menu
Principale
À droite
Bas de page
Les éléments de grille nommés peuvent être référencés par la grid-template-areaspropriété du conteneur de grille.
Exemple
Item1 obtient le nom "myArea" et s'étend sur les cinq colonnes dans une disposition de grille à cinq colonnes :
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
myArea myArea myArea';
}
Chaque ligne est définie par des apostrophes (' ')
Les colonnes de chaque ligne sont définies à l'intérieur des apostrophes, séparées par un espace.
Remarque : Un signe point représente un élément de grille sans nom.
Exemple
Laissez "myArea" s'étendre sur deux colonnes dans une disposition de grille à cinq colonnes (les points représentent des éléments sans nom):
.item1 {
grid-area:
myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea
. . .';
}
Pour définir deux lignes, définissez la colonne de la deuxième ligne à l'intérieur d'un autre ensemble d'apostrophes :
Exemple
Faites en sorte que "item1" s'étende sur deux colonnes et deux lignes :
.grid-container {
grid-template-areas: 'myArea myArea
. . .' 'myArea myArea . . .';
}
Exemple
Nommez tous les éléments et créez un modèle de page Web prêt à l'emploi :
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 {
grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area:
footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main
main main right right'
'menu footer footer footer footer
footer';
}
L'ordre des articles
La disposition en grille nous permet de positionner les éléments où nous le souhaitons.
Le premier élément du code HTML n'a pas à apparaître comme le premier élément de la grille.
1
2
3
4
5
6
Exemple
.item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
Vous pouvez réorganiser l'ordre de certaines tailles d'écran en utilisant des requêtes multimédia :
Exemple
@media only screen and (max-width: 500px) {
.item1 { grid-area: 1 /
span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 /
span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6
{ grid-area: 2 / 3 / 3 / 4; }
}