Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

grid-template-areas - Propriété CSS

grid-template-areas

Résumé des caractéristiques de la propriété grid-template-areas

Description rapide
Définition de zones nommées dans une grille
Statut
Standard
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété grid-template-areas passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
 🡇  
 🡅  
Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

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.

Propriété grid-template-areas
Code CSS
Propriété grid-template-areas
Résultat

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

Propriété grid-template-areas

Exemples d'utilisation de 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.

Haut


Gauche


Centre


Droite
Bas

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.

Haut
Haut
Haut


Gauche


Centre


Droite
Gauche
Bas
Droite

 

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
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.

Lignes et colonnes nommées par grid-template-areas

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).

Syntaxes pour grid-template-areas.

  • '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.
Syntaxe de grid-template-areasSchéma syntaxique de la propriété CSS grid-template-areas (définition de plages dans un conteneur grille). none none 'string' 'string'grid-template-areas:;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.

    Erreur de conception avec grid-template-areas

    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; grid-template-areas: inherit; grid-template-areas: revert; grid-template-areas: revert-layer; grid-template-areas: unset;

    La valeur initiale est : none.

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

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

La miniaturisation augmente la puissance de calcul : on peut être petit et intelligent.
(Bernard Werber)
Un programme informatique fait ce que vous lui avez dit de faire, pas ce que vous voulez qu'il fasse.
Un PC sous Windows, c'est un amas de compatibilité avec l'antiquité informatique.
Internet. On ne sait pas ce qu'on y cherche mais on trouve tout ce qu'on ne cherche pas.
(Anne Roumanoff)
L'Internet serait une toile comme les autres si elle n'avait ses millions d'araignées...
(Maxime Allain)

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
grid-template-areas
Estimation de la prise en charge en pourcentage du parc actuel.
93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que grid-template-areas.

Les spécifications CSS éditées par le W3C sont organisées en modules. grid-template-areas fait partie du Module CSS - Mise en page par grille (CSS Grid Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Propriété raccourcis définissant les principaux paramètres d'une grille.
Positionne un élément dans une zone nommée de la grille.
Mode de calcul des colonnes 'auto' dans une grille.
Mode de calcul de l'emplacement des éléments dans la grille.
Mode de calcul de la hauteur 'auto' des lignes dans une grille.
Numéro de colonne(s) d'un élément dans une grille.
Numéro de la colonne de fin d'un élément dans une grille.
Numéro de la colonne de début d'un élément dans une grille.
Numéro des lignes d'un élément dans une grille.
Numéro de la ligne de fin d'un élément dans une grille.
Numéro de la ligne de départ d'un élément dans une grille.
Largeur des colonnes et hauteur des lignes d'une grille.
Définition du nombre et de la largeur des colonnes d'une grille.
Définition du nombre et de la hauteur des lignes d'une grille.

Fonctions.

Renvoie une valeur comprise dans une fourchette.
Répète une valeur un certain nombre de fois.