Propriété CSS grid-template-areas

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>

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>

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.

Support de Navigateurs

57.0+ 16.0+ 52.0+ 10.1+ 44.0+


Trouvez-vous cela utile?

Articles Associées