Grid-template - Propriété CSS

Description de la propriété grid-template.

grid-template définit en une seule écriture toutes les caractéristiques d'un container grille : nombre et hauteur des lignes, nombre et largeur des colonnes, et zones nommées éventuelles.

grid-template est une propriété résumée qui permet de définir en une seule fois les valeurs pour les trois propriétés :

• grid-template-areas : définition de zones nommées dans la grille.
• grid-template-rows : définition du nombre de lignes d'une grille et de leurs hauteurs respectives.
• grid-template-columns : définition du nombre de colonnes d'une grille et de leurs largeurs respectives.

Vous pouvez également consulter le tutoriel sur les grilles qui décrit dans le détail toutes les possibilités des grilles, ainsi que les propriétés correspondantes.

Exemple d'utilisation (lignes et colonnes).

Dans l'exemple ci-dessous, la propriété grid-template est utilisé pour définir la hauteur des 3 lignes et la largeur des 4 colonnes de la grille. Les hauteurs de ligne sont définies en pixels, et les largeurs de colonnes en pourcentages.

Exemple d'utilisation (zones nommées).

Ce deuxième exemple crée cinq plages sur la grille, dénommées 'logo', 'titre', 'ariane', 'droite' et 'menu'. Reportez-vous à la propriété grid-template-areas pour plus de détail sur les plages nommées dans une grille.
Et pour affecter les éléments à leur plage (propriété grid-area) il n'y a pas d'apostrophes du tout.

Notez la syntaxe particulière : il y a autant de chaînes de caractères que de lignes dans la grille, et chacune de ces chaînes contient autant de noms qu'il y a de colonnes dans la grille. CSS n'étant pas géné par les retours à la ligne, il est possible de disposer ces chaînes les unes en dessous des autres, pour créer une disposition comparable à la grille.

Exemple d'utilisation (zones, lignes et colonnes).

Ce troisième exemple exploite toutes les possibilités de grid-template : définition des plages, de la hauteur des lignes et de la largeur des colonnes.

La disposition des éléments dans la grille est la même que celle de l'exemple précédent, mais les dimensions des cellules sont maintenant imposées. Les hauteurs de ligne sont définies en pixels, tandis que les largeurs de colonne sont définies avec l'unité fr, particulièrement bien adaptée à cet usage.

Exemple d'utilisation (nommer lignes et colonnes).

La propriété grid-template peut également être utilisée pour donner un nom aux lignes et aux colonnes, au lieu de nommer des plages comme nosu venosn de le voir. Ceci rendra plus lisible par la suite l'affection des éléments aux différents emplacements de la grille.

Vous verrez dans le code CSS que la première ligne de la grille a été nommée entete, et la dernière pied. Les deux autres lignes de cette grille n'ont pas reçu de nom.
Les trois colonnes sont nommées respectivement gauche, centre et droite. Les éléments de la grille peuvent ensuite être positionnés en indiquant un nom de ligne et un nom de colonne.

Dans la syntaxe de grid-template, les noms doivent être entourés de crochets.

Animation de la propriété grid-template.

Reportez-vous aux propriétés individuelles pour des exemples d'animation.

Prise en charge par les navigateurs (compatibilité).

La prise en charge de grid-template est bonne sur tous les navigateurs.

De façon générale, la restitution des grilles est correcte, sauf pour l'ancien navigateur Internet explorer, qui traite les grilles de façon différente. Reportez-vous à la page sur la propriété grid pour une description plus détaillée des problèmes de compatibilité et des solutions pour les résoudre.

1

Propriété
grid-template

Estimation de la prise en charge globale.

93%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété grid-template.

• Module CSS - Mise en page par grille - Niveau 1

  Introduction des mises en page sous forme de grille.
  Première définition de la propriété grid-template.
  

  07 Avril 2011

  Document de travail.

  

  29 Septembre 2016

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 2

  Le niveau 2 de la spécification n'apporte pas de changement dans la définition de la propriété grid-template.
  

  06 Février 2018

  Document de travail.

  

  18 Août 2020

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 3

  Pas de changement impactant directement la propriété grid-template.
  

  19 Septembre 2024

  Document de travail.

  

  

  

Autres pages concernant les grilles.

Propriétés :

Fonctions :