Propriété CSS grid-area

Exemple interactif

grid-area: a;

grid-area: b;

grid-area: c;

grid-area: 2 / 1 / 2 / 4;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Exemple</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, minmax(40px, auto));
  grid-template-areas:
    "a a a"
    "b c c"
    "b c c";
  grid-gap: 10px;
  width: 200px;
}

.example-container > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element {
  background-color: rgb(255 0 200 / 0.2);
  border: 3px solid rebeccapurple;
}

Si quatre valeurs <grid-line> sont fournies, la première est appliquée à grid-row-start, la deuxième à grid-column-start, la troisième à grid-row-end et la quatrième à grid-column-end.

Lorsqu'il n'y a pas de valeur pour grid-column-end, si grid-column-start est un identifiant de zone (<custom-ident>, grid-column-end est défini avec cet identifiant, sinon il est défini avec auto.

Lorsqu'il n'y a pas de valeur pour grid-row-end, si grid-row-start est un identifiant de zone, grid-row-end est défini avec cet identifiant, sinon il est défini avec auto.

Lorsqu'il n'y a pas de valeur pour grid-column-start, si grid-row-start est un identifiant de zone, les quatre propriétés sont définies avec cette valeur. Sinon, elles valent auto.

La propriété grid-area peut également prendre comme valeur un identifiant personnalisé (<custom-ident>) qui peut être utilisé comme nom pour une zone de la grille placée grâce à la propriété grid-template-areas.

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

Syntaxe

/* Valeurs avec un mot-clé */
grid-area: auto;
grid-area: auto / auto;
grid-area: auto / auto / auto;
grid-area: auto / auto / auto / auto;

/* Valeurs de type <custom-ident> */
grid-area: une-zone-de-grille;
grid-area: une-zone-de-grille / une-autre-zone;

/* Forme : <integer> && <custom-ident>? */
grid-area: une-zone-de-grille 4;
grid-area: une-zone-de-grille 4 / 2 une-autre-zone;

/* Forme span && [ <integer> || <custom-ident> ] */
grid-area: span 3;
grid-area: span 3 / span une-zone-de-grille;
grid-area: 2 span / une-autre-zone span;

/* Valeurs globales */
grid-area: inherit;
grid-area: initial;
grid-area: revert;
grid-area: revert-layer;
grid-area: unset;

Valeurs

auto

Un mot-clé qui indique que la propriété ne contribue pas au placement de l'élément sur la grille. Cela indique un placement automatique, une taille de fragment (span) automatique ou une taille par défaut de 1.

<custom-ident>

S'il existe une ligne nommée avec <custom-ident>-start ou <custom-ident>-end, la première ligne correspondante contribue au placement de l'élément sur la grille.

Note : Les noms des zones de grille sont générés implicitement. Ainsi, en utilisant grid-area: toto; cela sélectionne le début de la grille nommée correspondante (sauf si une autre ligne toto-start/toto-end a été explicitement déclarée).

Sinon, la valeur est traitée comme si on a utilisé <custom-ident> et la valeur 1.

<integer> && <custom-ident>?

La n-ième ligne de la grille contribue au placement de l'élément sur la grille. Si un entier négatif est utilisé, le comptage est fait depuis la fin de la grille explicite.

Si un nom est fourni pour <custom-ident>, seules les lignes ayant ce nom sont comptées. S'il n'y a pas suffisamment de lignes existant avec ce nom, toutes les lignes implicites sont comptées afin de trouver la position.

Si la valeur entière (<integer>) utilisée est 0, la règle est invalide.

span && [ <integer> || <custom-ident> ]

Un fragment de grille est utilisé pour le placement de l'élément sur la grille afin que le début de la ligne pour l'élément de la grille soit placé à n lignes du bord de fin.

Si un nom fourni pour <custom-ident>, seules les lignes ayant ce nom sont comptées. S'il n'y a pas suffisamment de lignes existantes avec ce nom, toutes les lignes implicites du côté de la grille explicite et qui correspondent à la direction de la recherche sont comptées afin de placer ce fragment.

Si l'entier (<integer>) n'est pas défini, la valeur par défaut qui est utilisée est 1. Les entiers négatifs ou nuls sont invalides.

Définition formelle

Syntaxe formelle

grid-area = 
  <grid-line> [ / <grid-line> ]{0,3}  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]   

<integer> = 
  <number-token>  

Exemples

Définir les zones de grille

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template: repeat(4, 1fr) / 50px 100px;
}

#item1 {
  background-color: lime;
  grid-area: 2 / 2 / auto / span 3;
}

#item2 {
  background-color: yellow;
}

#item3 {
  background-color: blue;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété raccourcie grid-row
• La propriété grid-row-start
• La propriété grid-row-end
• La propriété raccourcie grid-column
• La propriété grid-column-start
• La propriété grid-column-end
• La propriété grid-template-areas
• Les zones des grilles CSS
• Vidéo : les zones des grilles CSS ^(angl.)