W3docs
fr
Se connecter

Propriété CSS grid-area

La propriété CSS grid-area définit la taille et l'emplacement des éléments dans les lignes du conteneur de grille. Voir aussi des exemples interactifs.

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

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

Valeur initialeauto / auto / auto / auto
S'applique àLes éléments de grille.
HéritageNon.
AnimableNon.
VersionCSS Grid Layout Module Level 1
Syntaxe DOMelement.style.gridArea = "1 / 2 / span 2 / span 3";

Syntaxe

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

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

Exemple

<!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>
Essayez vous-même »

Résultat

Propriété CSS grid-area

Dans l'exemple suivant, l'élément box1 reçoit la valeur itemname, qui s'étend sur les cinq colonnes définies dans le modèle de grille. Notez que la grille ne définissant que 5 colonnes, les éléments restants sont automatiquement placés dans la ligne suivante (placement implicite dans la grille).

Il est également possible de positionner un élément en utilisant des numéros de lignes de grille plutôt qu'un nom. Les quatre valeurs suivent l'ordre row-start / column-start / row-end / column-end, et le mot-clé span indique à l'élément combien de pistes il doit couvrir. Dans l'exemple ci-dessous, grid-area: 1 / 1 / 3 / 3; fait démarrer l'élément à la première ligne et première colonne, et se terminer à la troisième ligne et colonne, couvrant ainsi une zone 2×2.

Exemple avec des numéros de lignes de grille

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        /* row-start / column-start / row-end / column-end */
        grid-area: 1 / 1 / 3 / 3;
        background-color: #8ebf42;
      }
      .grid-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 60px;
        gap: 5px;
        background-color: #555;
        padding: 5px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Placing an item with line numbers</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>7</div>
      <div>8</div>
    </div>
  </body>
</html>

Exemple avec la valeur itemname

<!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>
Essayez vous-même »

Valeurs

ValeurDescription
<grid-line>Spécifie la ligne de grille où l'élément commence ou se termine. Accepte un nombre, span <number> ou auto.
custom-identSpécifie un nom pour l'élément (utilisé avec grid-template-areas).
initialRétablit la valeur par défaut de la propriété.
inheritHérite de la propriété de l'élément parent.

Exercice

Pratique
Quel est le rôle de la propriété CSS 'grid-area' ?
Quel est le rôle de la propriété CSS 'grid-area' ?
Was this page helpful?