Attribut CSS grid-template-areas

Définition et utilisation

L'attribut grid-template-areas définit les zones dans la mise en page en grille.

Vous pouvez utiliser grid-area Nommez les éléments de la grille, puis référez-vous à ce nom dans l'attribut grid-template-areas.

Chaque zone est définie par une guillemet oblique. Utilisez le point pour citer les projets de grille sans nom.

Voir également :

Tutoriel CSS :Projet de grille CSS

Manuel de référence CSS :Attribut grid-area

Manuel de référence CSS :Attribut grid-template

Exemple

Exemple 1

Fait en sorte que le projet "myArea" traverse deux colonnes dans un layout de grille de cinq colonnes :

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas: "myArea myArea . . .";
}

Essayez-le vous-même

Exemple 2

Définit deux lignes, où "item1" traverse les deux premières colonnes des deux premières lignes (dans un layout de grille de cinq colonnes) :

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template-areas:
    'myArea myArea . . .'
    'myArea myArea . . .';
}

Essayez-le vous-même

Exemple 3

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 {
  display: grid;
  grid-template-areas:
    'header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Essayez-le vous-même

Syntaxe CSS

grid-template-areas: none|itemnames;

Valeur de l'attribut

Valeur Description
none Valeur par défaut. Les zones de grille non nommées (grid areas).
itemnames Définit la séquence par laquelle chaque colonne et chaque rangée doit être affichée.

Détails techniques

Valeur par défaut : none
Héritage : Non
Réalisation de l'animation : Supporté. Voir également :Propriétés liées aux animations.
Version : Module de mise en page en grille CSS niveau 1
Syntaxe JavaScript : object.style.gridTemplateAreas=". . . myArea myArea"

Support du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété en totalité.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44