Grid-area - Propriété CSS

grid-area

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

Description rapide
Positionne un élément dans une zone nommée de la grille.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété grid-area passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de grid-area.

Grid-area property - Syntax diagramSyntax diagram of the grid-area CSS property. See stylescss.free.fr for details. auto auto integer1 integer1 id id span integer2 span integer2 span id span id / {1,4} / {1,4}grid-area:;grid-area:;
Schéma syntaxique de la propriété grid-area
Exemples et syntaxe détaillée

Description des termes utilisés sur le schéma :

  • integer1 est un nombre sans unité, supérieur ou égal à 1. Il correspond à un numéro de ligne ou de colonne.
  • integer2 est un également un nombre sans unité supérieur ou égal à 1 correspondant à un nombre de colonnes.
  • id est le nom d'une plage défini préalablement défini par la propriété grid-template-areas.
  • Cette syntaxe peut être répétée de une à quatre fois, en séparant les occurrences par une barre oblique ( / ).

Description de la propriété grid-area.

grid-area permet de positionner un élément dans la grille, soit en indiquant un numéro de ligne et un numéro de colonnes, soit en précisant le nom d'une plage préalablement définie sur la grille avec grid-template-areas. Avec l'une ou l'autre de ces syntaxes, il est possible aussi de préciser que l'élément s'étend sur plusieurs lignes et/ou plusieurs colonnes.

La propriété grid-area s'applique donc à un des éléments internes de la grille et non pas au container grille.

grid-area est une propriété résumée qui définit 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 les propriétés grid-row et grid-column, grid-template-areas. Et, pour une présentation générale des possibilités des grilles, reportez-vous à notre tutoriel sur les grilles.

Syntaxes pour grid-area.

  • grid-area: auto;

    La valeur auto spécifie que l'élément se positionne à la suite du précédent, autrement dit, que aucune contrainte particulière n'est imposée sur le positionnement de cet élément.
    La valeur auto peut être indiquée une seule fois, c'est la valeur initiale de la propriété, ou bien être accompagnée de valeurs numériques, ce qui permet d'imposer le positionnement uniquement sur la ligne, ou uniquement sur la colonne.

  • grid-area: 2 / 3 / 4 / 7; a b c d

    Quatre valeurs qui définissent la position d'un des éléments dans 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 correspondent, dans l'ordre :

    1. a : ligne sur laquelle débute l'élément.
    2. b : colonne sur laquelle débute l'élément.
    3. c : ligne contre laquelle l'élément vient s'arrêter. Cette valeur doit être supérieure à a (1).
      Exemple : si c a la valeur 4, l'élément s'étendra jusqu'à la ligne 3.
    4. d : colonne contre laquelle l'élément vient s'arrêter. Cette valeur doit être supérieure à b (1).
      Exemple : si d a la valeur 8, l'élément s'étendra jusqu'à la colonne 7.

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

    (1) Certains navigateurs traitent correctement la syntaxe même si les valeurs sont inversées (valeur de fin inférieure ou égale à la valeur de début).

    Attention à bien comprendre la signification de "la ligne ou la colonne sur laquelle l'élément vient s'arrêter". Pour obtenir le rendu ci-dessous il a fallu préciser 4 pour la ligne de fin, et 7 pour la colonne de fin.

  • grid-area: 2 / 3 / span 2 / span 2;

    Le mot span, lorsqu'il est présent, indique que le nombre qui suit est un nombre de lignes ou de colonnes, et non plus un numéro de ligne ou de colonne. La syntaxe de notre exemple précise que l'élément ses situe en ligne 2 et en colonne 3, et qu'il s'étend sur 2 lignes et 2 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 ni plusieurs colonnes.
    Notre exemple donne donc le résultat suivant :

  • grid-area: 2;

    Lorsque toutes les valeurs ne sont pas indiquées, celles qui ne le sont pas sont remises à leur valeur initiale (auto), comme c'est le cas pour toutes les propriétés résumées. La syntaxe donnée en exemple est donc équivalente aux 4 règles ci-dessous, ce qui revient à positionner l'élément sur la ligne 2.

    grid-row-start:2; grid-column-start:auto; grid-row-end:auto; grid-column-end:auto;
  • grid-area: demo;

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

    Sur la grille ci-dessous le nom demo a été défini sur la plage qui va des lignes 1 à 4 et des colonnes 3 à 6. Pour positionner un élément sur cette plage, il suffit maintenant d'écrire grid-area:demo;

    Pour mieux comprendre comment nommer des pages dans une grille, reportez-vous à la propriété grid-template-areas.

Valeurs communes :

grid-area: initial (auto) grid-area: inherit grid-area: revert grid-area: revertLayer grid-area: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété grid-area.

L'animation de grid-area se fait sans transition : une animation définie de 1 à 4 pour le numéro de colonne ne passera pas par les étapes 2 et 3. Pour obtenir l'effet ci-dessous il a fallu définir toutes les étapes colonne par colonne, et ligne par ligne.

Notez bien qu'il ne s'agit pas d'un simple effet visuel de changement de couleur : tous les éléments se redisposent à chaque étape de l'animation. Ceci peut provoquer des temps de calcul assez longs et produire finalement une animation peu fluide : grid-area n'est pas vraiment une propriété adaptée à l'animation.

1
2
3
4
5
6
7
8
9
10
11
12

Simulateur avec la propriété grid-area.

Le simulateur ci-dessous applique les valeurs de grid-areasur le premier élément de la grille, en bleu. Les autres éléments se disposent en fonction des places restantes.

Le nombre de lignes ou de colonnes de la grille peut être automatiquement étendu si nécessaire, par exemple si vous précisez un numéro de ligne supérieur à 3.

grid-area :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

Prise en charge par les navigateurs (compatibilité).

La prise en charge des grilles est globalement très bonne avec la navigateurs actuels.

Le vieux navigateur Internet Explorer   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.

1
Propriété
grid-area
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

Historique de la propriété grid-area.

Voir aussi : autres notions concernant les grilles.

Propriétés :

grid
Propriété résumée définissant les principaux paramètres d'une grille.
grid-auto-columns
Définit la largeur par défaut des colonnes dans une grille.
grid-auto-flow
Définit le mode de calcul automatique pour positionner les éléments dans la grille.
grid-auto-rows
Définit la hauteur par défaut des lignes dans une grille.
grid-column
Numéro(s) de(s) colonne(s) où doit se positionner cet élément dans la grille.
grid-column-end
Numéro de la colonne sur laquelle un élément doit venir se terminer (dans une grille).
grid-column-start
Numéro de la colonne sur laquelle doit commencer un élément dans une grille.
grid-row
Numéro(s) de(s) lignes) où doit se positionner cet élément dans la grille.
grid-row-end
Numéro de la ligne sur laquelle un élément doit venir se terminer (dans une grille).
grid-row-start
Numéro de la ligne sur laquelle doit commencer un élément dans une grille.
grid-template
Propriété résumée pour définir les largeurs de colonnes, la hauteur des lignes, et les plages d'une grille.
grid-template-areas
Définit les zones nommées dans une grille.
grid-template-columns
Définit le nombre et la largeur des colonnes d'une grille.
grid-template-rows
Définit le nombre et la hauteur des lignes d'une grille.

Fonctions :

minmax()
Renvoie une valeur comprise dans une fourchette, pour dimensionner la hauteur des lignes ou la largeur des colonnes d'une grille.
repeat()
Facilite la définition des lignes ou des colonnes d'une grille lorsqu'elles sont nombreuses.