CSS - Propriété grid-area

Description de la propriété grid-area.

grid-area permet de positionner un élément dans la grille, en ligne et en colonne. grid-area s'applique donc à un des éléments internes de la grille et non pas au container grille. L'élément peut s'étendre sur plusieurs lignes et/ou plusieurs colonnes.

grid-area est une propriété raccourcie qui résume les valeurs des quatre propriétés suivantes :

• grid-row-start : première ligne sur laquelle s'étend l'élément.
• grid-column-start : première colonne sur laquelle s'étend l'élément.
• grid-row-end : ligne sur laquelle l'élément vient s'arrêter. Cette valeur doit être supérieure à la première.
• grid-column-end : colonne sur laquelle l'élément vient s'arrêter. Cette valeur doit être supérieure à la deuxième.

Les lignes et les colonnes sont numérotées à partir de 1.

Voir également grid-row et grid-column, et, pour une présentation générale des possibilités des grilles, la propriété grid.

Syntaxes pour grid-area.

• grid: 2 / 3 / 4 / 5; a b c d

  Quatre valeurs qui définissent la position d'une des cellules de la grille.

  Ces valeurs sont des nombres sans unité, séparés par une barre oblique. Ce qui est curieux par rapport à la syntaxe habituelle du CSS.

  Ces quatre valeurs sont, dans l'ordre suivant :

  1. a : ligne sur laquelle débute l'élément.
  2. b : colonne sur laquelle débute l'élément.
  3. c : ligne sur laquelle l'élément vient s'arrêter. Cette valeur doit être supérieure à a.
  4. d : colonne sur laquelle l'élément vient s'arrêter. Cette valeur doit être supérieure à b.

  Les lignes et les colonnes sont numérotées à partir de 1.

  Internet Explorer ne traite pas la propriété grid-area : il faut positionner les cellules en indiquant leurs ligne et colonne de départ et leurs étendues (span) en lignes et en colonnes.
• grid-area: 2 / 3;

  Lorsque deux valeurs seulement sont précisées, elles correspondent au numéro de ligne et au numéro de colonne où cet élément doit se positionner dans la grille, sans s'étendre sur plusieurs lignes ou plusieurs colonnes.
• grid-area: demo;

  grid-area peut accepter également une valeur du type texte, qui sera un nom défini au préalable avec la propriété grid-template-areas. Le nom ne doit pas être entouré de guillemets ni d'apostrophes.

  Internet Explorer ne traitant ni la propriété grid-area ni les zones nommées, le positionnement d'une cellule se fera comme toujours en précisant le numéro de ligne, le numéro de colonne, et l'étendue éventuelle de la cellule sur plusieurs lignes ou colonnes.

Simulateur.

Le simulateur ci-dessous applique les valeurs sur l'élément numéro 0 (en bleu). Les autres éléments se disposent en fonction des places restantes.

Prise en charge par les navigateurs (compatibilité).

La prise en charge des grilles est globalement assez bonne, sauf pour Internet explorer qui ne gère pas les 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é avec Internet Explorer.

Afficher le tableau de compatibilité (informations fournies par canIuse.com).

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-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-areas : Définition de zones nommées dans 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.