Propriété CSS grid-template-areas

La propriété grid-template-areas est utilisée pour définir des zones de grille nommées en attribuant des noms aux cellules de la grille. Vous pouvez nommer les éléments de la grille à l'aide de la propriété grid-area. Chaque zone est définie par des guillemets doubles. Ces zones peuvent être référencées à partir de propriétés de placement de grille telles que grid-row-start, grid-row-end, grid-column-end, grid-column-start, ainsi que de leurs propriétés raccourcies, comme grid-row, grid-area et grid-column.

Valeur initiale	none
S'applique à	Conteneurs de grille.
Héritée	Non.
Animable	Oui. La propriété est animable.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridTemplateAreas = '"item1 item1 . ." "item1 item1 . ."';

Syntaxe

Syntaxe CSS de grid-template-areas

css

grid-template-areas: none | itemnames | initial | inherit;

Exemple de la propriété grid-template-areas :

Exemple de code CSS pour grid-template-areas

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        grid-area: header;
      }
      .box2 {
        grid-area: menu;
      }
      .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" "menu main main main right right" "menu footer footer footer footer footer";
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-areas property example</h2>
    <div class="grid-container">
      <div class="box1">Header</div>
      <div class="box2">Menu</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-template-areas another

Exemple de la propriété grid-template-areas, où un nom "item1" est attribué à un élément de grille :

Autre exemple de code CSS pour grid-template-areas

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template-areas: "item1 item1 . . .";
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 30px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-template-areas property example</h2>
    <div class="grid-container">
      <div class="box">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	Tester »
none	Aucune zone de grille nommée ne sera définie. Il s'agit de la valeur par défaut de cette propriété.	Tester »
itemnames	Une séquence de chaînes de caractères entre guillemets qui spécifient les zones de grille.	Tester »

Pratique

À quoi sert la propriété 'grid-template-areas' en CSS ?

Elle est utilisée pour spécifier une mise en page pour les éléments dans une grille.Elle est utilisée pour créer une image d'arrière-plan pour une page web.Elle est utilisée pour définir un motif de zones de grille nommées qui sont référencées à partir de la propriété 'grid-area' d'un élément de grille.Elle est utilisée pour modifier la couleur du texte sur une page web.

Propriété CSS grid-template-areas ​

Syntaxe ​

Exemple de la propriété grid-template-areas : ​

Résultat ​

Exemple de la propriété grid-template-areas, où un nom "item1" est attribué à un élément de grille : ​

Valeurs ​