Grid-template-areas - Propriété CSS

Schéma de la syntaxe de grid-template-areas.

Sur le schéma :

• 'string' est une suite de chaînes de caractères, entre apostrophes ou entre guillemets.
• Il doit y avoir autant de chaînes de caractères qu'il y a de lignes dans la grille.

Description de la propriété grid-template-areas.

La propriété grid-template-areas permet de nommer des zones dans une grille. Ces noms pourront ensuite être utilisés avec la propriété grid-area pour positionner les éléments dans la grille.

Voici comment procéder :

1. Définir le nombre de lignes et leur hauteur avec grid-template-rows. Définir également le nombre de colonnes et leur largeur avec grid-template-columns.
2. Définir les zones et leur attribuer un nom avec grid-template-areas.
3. Associer chacun des éléments internes à un nom de plage avec la propriété grid-area.

grid-template-areas attend une suite de chaînes de caractères entre apostrophes (autant de chaînes que de lignes dans la grille). Chacune des chaînes contient une série d'identifiants (autant d'identifiants que de colonnes dans la grille).
En disposant judicieusement ces chaînes les unes en dessous des autres, le code CSS peut gagner en lisibilité et figurer le rendu final de la grille.

Code CSS

Résultat

Chacune des zones doit être rectangulaire. La définition suivante est donc incorrecte car la zone ccc n'est pas rectangulaire.

Exemples d'utilisation de la propriété grid-template-areas.

Nommer des zones dans la grille est une technique très puissante pour définir des mises en pages complexes avec peu de code.

Utilisation de base de grid-template-areas.

Voici une disposition classique pour une page web, qui peut se réaliser très facilement avec une grille de 3 lignes et 3 colonnes. Vous pouvez afficher le code HTML utilisé pour la construire et le code CSS pour la mettre en forme.

La figure ci-dessous fait mieux apparaître la logique de fonctionnement de grid-template-areas en rendant visible les traits de séparation de la grille. dans chacune des cellules est affiché le nom de la plage à laquelle elle appartient.

Exemple plus réaliste, avec du contenu.

En affichant le CSS (il ne s'agit pas d'une image mais bien d'éléments HTML et de leur CSS), vous verrez à quel point il suffit de peu de lignes de code pour obtenir cette mise en page. En dessous, nous avons représenté la grille avec les noms reçus par chacune des cellules.

Sur cet exemple, nous n'avons même pas défini les lignes et les colonnes. Le seul fait de nommer les plages a suffit.

Titre de la page

Menu 1

Menu 2

Menu 3

Fil d'Ariane

Partage réseaux sociaux

La mise en page à partir d'un élément du type grille est particulièrement puissante et facile à mettre en œuvre. La possibilité de prédéfinir des zones et de leur attribuer un nom avec la propriété grid-template-areas ajoute encore à la simplicité d'utilisation.
On retrouve les principes de travail du framework bootstrap.

 

Pied 1

Pied 2

Pied 3

Nommage automatique des lignes et des colonnes.

grid-template-areas ne se contente pas de nommer des plages dans la grille, la propriété nomme en plus les lignes et les colonnes qui délimitent ces plages.
Sur la grille ci-dessous, trois plages ont été nommées jaune, bleu et vert conformément au dessin.

En plus de ces trois noms de plages, grid-template-areas a défini 6 noms de ligne et 6 noms de colonne. Ces noms pourront être utilisés avec les propriétés grid-row et grid-column pour définir l'emplacement des éléments dans la grille. Pour définir l'emplacement d'un élément, nous avons donc le choix, soit d'utiliser le nom d'une plage avec grid-area, soit d'utiliser le nom d'une ligne et d'une colonne avec grid-row et grid-column.

Ces noms reprennent le nom de la plage suivi de start ou end.

Ci-dessous la réalisation de cet exemple avec une grille comportant 3 cellules. Deux variantes du code CSS sont proposées. La première utilise les noms de lignes et de colonnes, la deuxième utilise les noms de plages (plus simple dans ce cas).

Valeurs pour grid-template-areas.

• grid-template-areas: none;

  Valeur par défaut. Aucune plage nommée n'est définie dans la grille.

• grid-template-areas: 'haut-g haut-g haut-d haut-d' 'gauche milieu milieu droite' 'gauche pied-g pied-d droite';

  Plusieurs chaînes de caractères séparées par des espaces et entourées de guillemets ou d'apostrophes. Chaque chaîne définit une ligne, et chaque mot dans une chaîne définit une cellule sur la ligne. Toutes ces chaînes doivent contenir le même nombre de mots.
  Un point ou une suite de points dans une de ces chaînes de caractères indique une cellule qui ne doit pas être nommée.

  Évitez de commencer les noms de plages par un chiffre. Ce sera accepté dans la syntaxe de grid-template-areas mais compliquera les choses pour associer un des éléments de la grille à cette plage.

  On peut disposer ces chaînes sur plusieurs lignes, ce qui donne un aperçu visuel de ce que sera la grille résultat.

  Attention ! Les zones définies doivent être rectangulaires. La zone verte sur le dessin ci-dessous ne pourrait pas être définie comme une zone unique.

  

  Rappelons que grid-template-areas a non seulement défini les noms de 7 plages, mais également 14 noms de lignes et 14 noms de colonnes : haut-g-start, haut-g-end, gauche-start, etc.

  Remarque : si les lignes et les colonnes de la grille ne sont pas explicitement définies par les propriétés grid-template-rows et grid-template-columns, elles seront créées par grid-template-areas avec la hauteur de ligne par défaut et la largeur de colonne par défaut. Voir grid-auto-rows et grid-auto-columns pour fixer ces valeurs par défaut.

• grid-template-areas: initial; (none) grid-template-areas: inherit; grid-template-areas: revert; grid-template-areas: revertLayer; grid-template-areas: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de grid-template-areas.

L'animation de grid-template-areas peut donner des choses totalement farfelues ou fantaisistes, mais attention au temps de calcul.

Prise en charge de grid-template-areas par les navigateurs.

La prise en charge de la propriété grid-template-areas est globalement bonne, sauf pour Internet explorer qui ne gère pas la notion de zones nommées dans les grilles. Reportez-vous à la page sur la propriété grid pour une description plus détaillée des problèmes de compatibilité.

1

Propriété
grid-template-areas

Estimation de la prise en charge globale.

93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété grid-template-areas.

• Module CSS - Mise en page par grille - Niveau 1

  Le niveau 1 de la spécification introduit la notion de grille pour les mises en page.
  La première définition de la propriété grid-template-areasapparait également dans cette norme.
  

  07 Avril 2011

  Document de travail.

  

  29 Septembre 2016

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 2

  Pas de changement concernant la propriété grid-template-areas.
  

  06 Février 2018

  Document de travail.

  

  18 Août 2020

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 3

  La principale nouveauté du niveau 3 de la spécification concerne les grilles du type "Maçonnerie" (masonry). Mais cela n'impacte par directement la propriété grid-template-areas.
  

  19 Septembre 2024

  Document de travail.

  

  

  

Autres propriétés référencées dans le module CSS - Mise en page par grille.

Propriétés :

Fonctions :