grid-area - Propriété CSS
Résumé des caractéristiques de la propriété grid-area
auto
auto
grid-area
passe d'une valeur à l'autre sans transition.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
.
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 ( /
).
- 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 valeurauto
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 :
a
: ligne sur laquelle débute l'élément.b
: colonne sur laquelle débute l'élément.c
: ligne contre laquelle l'élément vient s'arrêter. Cette valeur doit être supérieure àa
(1).
Exemple : sic
a la valeur4
, l'élément s'étendra jusqu'à la ligne3
.d
: colonne contre laquelle l'élément vient s'arrêter. Cette valeur doit être supérieure àb
(1).
Exemple : sid
a la valeur8
, l'élément s'étendra jusqu'à la colonne7
.
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, et7
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'écriregrid-area:demo;
Pour mieux comprendre comment nommer des pages dans une grille, reportez-vous à la propriété
grid-template-areas
. - grid-area:
initial
; grid-area:inherit
; grid-area:revert
; grid-area:revert-layer
; grid-area:unset
;La valeur initiale est :
.auto
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.
Simulateur.
Le simulateur ci-dessous applique les valeurs de grid-area
sur 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.
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 grid
pour une description plus détaillée des problèmes de compatibilité avec Internet Explorer.
grid-area
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-area
.
Les spécifications CSS éditées par le W3C sont organisées en modules. grid-area
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.