propriété grid-template de CSS

Définition et utilisation

L'attribut grid-template est une abréviation des attributs suivants :

Veuillez également consulter :

Tutoriel CSS :Projet de grille CSS

Manuel de référence CSS :L'attribut grid-area

Manuel de référence CSS :L'attribut grid-template-rows

Manuel de référence CSS :L'attribut grid-template-columns

Manuel de référence CSS :L'attribut grid-template-areas

Exemple

Exemple 1

Créez un布局 en grille de trois colonnes avec une hauteur de 150 pixels pour la première colonne :

.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
}

Essayez-le vous-même

Exemple 2

Définit deux lignes, où "item1" couvre les deux premières colonnes des deux premières lignes (dans un layout de grille de cinq colonnes) :

.item1 {
  grid-area: myArea;
}
.grid-container {
  display: grid;
  grid-template:
    'myArea myArea ...'
    'myArea myArea ...';
}

Essayez-le vous-même

Exemple 3

Nommez tous les éléments et créez un modèle de page web prêt à l'emploi :

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
  display: grid;
  grid-template:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer';
}

Essayez-le vous-même

Syntaxe CSS

grid-template: none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;
Valeur de l'attribut
Valeur Description
none Valeur par défaut. Ne définit pas la taille des colonnes ou des lignes.
grid-template-rows / grid-template-columns Définit la taille des colonnes et des lignes.
grid-template-areas Définit le layout en grille en utilisant des noms de projets.
initial Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit Inherits this property from its parent element. Voir inherit.

Détails techniques

Valeur par défaut : none none none
Héritage : Non
Réalisation de l'animation : Prise en charge. Voir :Propriétés liées aux animations.
Version : Module de mise en page en grille CSS niveau 1
Syntaxe JavaScript : object.style.gridTemplate="250px / auto auto"

Prise en charge du navigateur

Les numéros dans le tableau indiquent la première version de navigateur prise en charge pour cette propriété.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44