Propriété CSS grid-template

La propriété grid-template définit les colonnes, les lignes et les zones de la grille. Il s'agit d'une propriété raccourcie pour les propriétés suivantes :

La propriété grid-template définit les lignes et les colonnes, séparées par une barre oblique.

INFO

La propriété grid-template n'affecte aucune gouttière (gap) en cascade.

La propriété raccourcie CSS grid réinitialise les autres propriétés de grille (comme grid-auto-rows et grid-gap) à leurs valeurs initiales. Si vous souhaitez définir uniquement les lignes, les colonnes et les zones sans affecter les autres propriétés de grille, utilisez grid-template au lieu de grid.

Valeur initiale	none
S'applique à	Conteneurs de grille.
Héritée	Non.
Animable	Oui. La mise en page en grille est animable.
Version	CSS Grid Layout Module Level 1
Syntaxe DOM	object.style.gridTemplate ="100px / auto auto";

Syntaxe

Syntaxe CSS de grid-template

css

grid-template: none | [ <grid-template-rows> / <grid-template-columns> ] | <grid-template-areas> | initial | inherit;

Exemple de la propriété grid-template :

Exemple de code CSS pour grid-template

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template: 170px / auto auto auto;
        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>Grid-template property example</h2>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS grid-template another

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

Autre exemple de code CSS pour grid-template

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box {
        grid-area: item1;
      }
      .grid-container {
        display: grid;
        grid-template: 'item1 item1 . .' '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>Grid-template 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 taille ne sera définie. Il s'agit de la valeur par défaut de cette propriété.	-
grid-template-rows / grid-template-columns	Spécifie la taille des lignes et des colonnes.	Tester »
grid-template-areas	Spécifie la mise en page de la grille à l'aide d'éléments nommés. Syntaxe : `<string>+`	Tester »
initial	Fait utiliser à la propriété sa valeur par défaut.	-
inherit	Hérite la propriété de son élément parent.	-

Pratique

Que représente la propriété 'grid-template' en CSS ?

Elle vous permet de créer une mise en page responsive avec des lignes et des colonnes.Elle est utilisée pour aligner le contenu à l'intérieur d'un élément de grille.Il s'agit d'une propriété raccourcie pour 'grid-template-rows', 'grid-template-columns' et 'grid-template-areas'.Elle modifie la couleur de fond d'une grille.

Propriété CSS grid-template ​

Syntaxe ​

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

Résultat ​

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

Valeurs ​