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 :

CSS - Propriété grid-template-areas

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 (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 on peut obtenir un schéma illustrant le rendu final de la grille.

Propriété grid-template-areas
Propriété grid-template-areas

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

Nommer des zones dans la grille est une technique très puissante pour définir des mises en pages complexes avec peu de code. Voici par exemple une disposition classique pour une page web et le code HTML utilisé pour la construire.

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.

Haut
Haut
Haut
Gauche
Centre
Droite
Gauche
Bas
Droite

Autre exemple.

Cliquez sur l'échantillon pour afficher 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.

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
Logo
Logo
Titre
Titre
Titre
Titre
Titre
Titre
Logo
Logo
Menu 1
Menu 1
Menu 2
Menu 2
Menu 3
Menu 3
Ariane
Ariane
Ariane
Ariane
Ariane
Social
Social
Social
Texte
Texte
Texte
Texte
Texte
Texte
Texte
Texte
Pied 1
Pied 2
Pied 2
Pied 3
Pied 3
Pied 3
Pied 3
Pied 3

Syntaxes 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. On peut disposer ces chaînes sur plusieurs lignes, ce qui donne un aperçu visuel de ce que sera la grille. Dans chacune des chaînes sont énumérés les noms à définir, autant de fois qu'ils couvrent de cellules.

    Chaque chaîne définit une ligne, et chaque mot dans une chaîne définit une cellule sur la ligne.

    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

    Les exemples ci-dessus donnent une idée assez précise des possibilités de cette propriété grid-template-areas.

  • grid-template-areas: initial;

    La valeur initiale est none.

  • grid-template-areas: unset; grid-template-areas: inherit;

    Reportez-vous à la description générale de ces valeurs.

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

La prise en charge des grilles est globalement assez 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é.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis définissant les principaux paramètres d'une grille.
  • grid-area : Positionne un élément dans une zone nommée de la grille.
  • grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.
  • repeat() : Répète une valeur un certain nombre de fois.