CSS Nommer les éléments de la grille
Nommer les éléments de la grille avec grid-area
La propriété CSS grid-template-areas est une propriété de conteneur de grille qui spécifie des zones au sein de la mise en page de la grille.
Vous pouvez nommer les éléments de la grille en utilisant la propriété CSS grid-area , puis faire référence à ce nom dans la propriété grid-template-areas .
Chaque zone est définie entre des apostrophes. Les éléments de la grille nommés dans chaque zone sont indiqués à l'intérieur des apostrophes, séparés par un espace.
Exemple
Laissez "Item1" porter le nom "myHeader" et laissez-le s'étendre sur cinq colonnes dans une mise en page de grille de cinq colonnes :
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader myHeader myHeader';
}
.item1 {
grid-area: myHeader;
}
Résultat :
Nous pouvons utiliser un point (.) pour faire référence à un élément de la grille sans nom :
Exemple
Laissez "myHeader" s'étendre sur trois colonnes dans une mise en page de grille de cinq colonnes (un point représente un élément sans nom) :
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader . .';
}
.item1 {
grid-area: myHeader;
}
Résultat :
Pour définir deux lignes (deux zones), définissez la deuxième ligne à l'intérieur d'un autre ensemble d'apostrophes :
Exemple
Laissez "myHeader" s'étendre sur deux colonnes et deux lignes :
.container {
display: grid;
grid-template-areas:
'myHeader myHeader . . .'
'myHeader myHeader . . .';
}
.item1 {
grid-area: myHeader;
}
Résultat :
Créer un modèle de page Web prêt à l'emploi
Ici, nous allons nommer tous les éléments de la grille pour créer un modèle de page Web prêt à l'emploi :
Exemple
Nommez tous les éléments de la grille 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; }
.container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'menu footer footer footer footer footer';
}
Résultat :