Propriété CSS grid-template-areas

❮ Précédent Suivant ❯

La propriété grid-template-areas est utilisée faire référence au nom lors de la configuration de la grille. Vous pouvez changer les éléments de grille en utilisant la propriété grid-area. Chaque zone est définie par apostrophes.

Quelques extension de propriété sont ajoutées, tels que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), -moz- pour Firefox, -o- pour les versions plus anciennes d'Opera etc.

Valeur initiale	auto
Appliquée à	Conteneur de grille.
Héritée	Non.
Animable	Oui. Les éléments sont animables.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridTemplateAreas = ''item1 item1 . .'' ''item1 item1 . .'';

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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';
      grid-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>Exemple de la propriété grid-template-areas</h2>
    <div class="grid-container">
      <div class="box1">Titre</div>
      <div class="box2">Menu</div>
      <div class="box3">Principal</div>
      <div class="box4">Droite</div>
      <div class="box5">Pied de page</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Dans cet exemple, le nom "item1" est donné à l'élément de grille:

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .box {
      grid-area: item1;
      }
      .grid-container {
      display: grid;
      grid-template: "item1 item1 . . .";
      grid-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>Exemple de la propriété grid-template</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>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Les zones de grille pas nommé seront définies. C'est la valeur initiale de cette propriété.
itemnames	Une séquence qui spécifie l'affichage de chaque colonne et ligne.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.