Propriété CSS grid-area
Exemple
Faites en sorte que "item1" commence sur la ligne 2, colonne 1, et s'étende sur 2 lignes et 3 colonnes :
.item1 {
grid-area: 2 / 1 / span 2 / span 3;
}
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La grid-areapropriété spécifie la taille et l'emplacement d'un élément de grille dans une disposition de grille et est une propriété abrégée pour les propriétés suivantes :
La grid-areapropriété peut également être utilisée pour attribuer un nom à un élément de grille. Les éléments de grille nommés peuvent ensuite être référencés par la
propriété grid-template-areas du conteneur de grille. Voir les exemples ci-dessous.
| Valeur par défaut: | voiture / voiture / voiture / voiture |
|---|---|
| Hérité: | non |
| Animable : | Oui. En savoir plus sur l'animation |
| Version: | Module de disposition de grille CSS niveau 1 |
| Syntaxe JavaScript : | objet .style.gridArea="1 / 2 / étendue 2 / étendue 3" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
| Property | |||||
|---|---|---|---|---|---|
| grid-area | 57 | 16 | 52 | 10 | 44 |
Syntaxe CSS
grid-area: grid-row-start / grid-column-start / grid-row-end /
grid-column-end | itemname;
Valeurs de propriété
| Value | Description |
|---|---|
| grid-row-start | Specifies on which row to start displaying the item. |
| grid-column-start | Specifies on which column to start displaying the item. |
| grid-row-end | Specifies on which row-line to stop displaying the item, or how many rows to span. |
| grid-column-end | Specifies on which column-line to stop displaying the item, or how many columns to span. |
| itemname | Specifies a name for the grid item |
Plus d'exemples
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 {
display:
grid;
grid-template-areas: 'myArea myArea myArea myArea myArea';
}
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 {
display:
grid;
grid-template-areas: 'myArea myArea . . .';
}
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';
}
Pages connexes
Tutoriel CSS : Mise en page de la grille CSS