Propriété CSS grid-area

La propriété grid-area est utilisée pour spécifier la taille et l'emplacement de l'élément de grille au sein du conteneur de grille. Il s'agit d'une propriété raccourcie pour les propriétés suivantes, appliquées dans l'ordre : row-start, column-start, row-end, column-end :

grid-row-start, spécifiant la ligne à partir de laquelle l'élément doit commencer.
grid-column-start, spécifiant la colonne à partir de laquelle l'élément doit commencer.
grid-row-end, spécifiant la ligne à laquelle l'élément doit se terminer.
grid-column-end, spécifiant la colonne à laquelle l'élément doit se terminer.

La propriété grid-area permet également d'attribuer un nom à un élément de grille. Les éléments de grille nommés peuvent ensuite être référencés par la propriété grid-template-areas du conteneur de grille.

Valeur initiale	auto / auto / auto / auto
S'applique à	Éléments de grille.
Héritée	Non.
Animable	Non.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	element.style.gridArea = "1 / 2 / span 2 / span 3";

Syntaxe

css

grid-area: <grid-line> / <grid-line> / <grid-line> / <grid-line> | <custom-ident> | initial | inherit;

Remarque : Le raccourci accepte de 1 à 4 valeurs. Si moins de 4 valeurs sont fournies, les valeurs manquantes sont par défaut auto. Le mot-clé span peut être utilisé pour les valeurs de fin (par ex. span 2).

Exemple

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: header;
      }
      .box2 {
        grid-area: left;
      }
      .box3 {
        grid-area: main;
      }
      .box4 {
        grid-area: right;
      }
      .box5 {
        grid-area: footer;
      }
      .grid-container {
        display: grid;
        grid-template-areas: 'header header header header header header' 'left main main main right right' 'left footer footer footer footer footer';
        gap: 5px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 30px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-area property example</h2>
    <p>You can use the grid-area property to name grid items.</p>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Left</div>
      <div class="box3">Main</div>
      <div class="box4">Right</div>
      <div class="box5">Footer</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS grid-area Property

Dans l'exemple suivant, l'élément box1 se voit attribuer la valeur itemname, qui s'étend sur les cinq colonnes définies dans le modèle de grille. Notez que puisque la grille ne définit que 5 colonnes, les éléments restants s'écoulent automatiquement sur la ligne suivante (placement implicite dans la grille).

Exemple avec la valeur itemname

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: itemname;
      }
      .grid-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-areas: 'itemname itemname itemname itemname itemname';
        gap: 5px;
        background-color: #8ebf42;
        padding: 5px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-area property example</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description
`<grid-line>`	Spécifie la ligne de grille où l'élément commence ou se termine. Accepte un nombre, `span <nombre>`, ou `auto`.
`custom-ident`	Spécifie un nom pour l'élément (utilisé avec `grid-template-areas`).
`initial`	Définit la propriété sur sa valeur par défaut.
`inherit`	Hérite la propriété de l'élément parent.

Pratique

Quel est l'objectif de la propriété CSS 'grid-area' ?

Spécifier la taille et l'emplacement d'un élément de grille au sein de la grilleDéfinir le modèle de grille pour un élément HTMLDéfinir l'espacement entre les colonnes de la grilleDéfinir les propriétés de marge en CSSPositionner un élément dans une cellule ou une zone spécifique

Propriété CSS grid-area ​

Syntaxe ​

Exemple ​

Résultat ​

Exemple avec la valeur itemname ​

Valeurs ​