Grid-template - Propriété CSS
Résumé des caractéristiques de la propriété grid-template
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.
grid-template qui définit la largeur des colonnes, la hauteur des lignes, et les plages nommée d'une grille.grid-templateNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Samsung Internet
Safari
Safari sur IOS
Chrome
Edge
Firefox
Opéra
Chrome pour Androïd
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historique de la propriété grid-template.
-
Module CSS - Mise en page par grille - Niveau 1
Cette spécification définit comment réaliser des mises en page sous frome de grilles, composées de lignes et de colonnes, avec une structure du document qui reste très simple : un conteneur et autant d'éléments que de cellules. Beaucoup plus simple en tout cas que les tableaux.
Chacune des cellules peut être alignée horizontalement dans le largeur des colonnes, ou verticalement dans la hauteur des lignes. Elles peuvent aussi être réparties ou agrandies pour couvrir toute la place disponible. Le contenu de chacune des cellules peut être aligné horizontalement et verticalement.
Une nouvelle unité (fr) est disponible pour dimensionner les colonnes ou les lignes.Concernantgrid-template. Introduction des mises en page sous forme de grille.
Première définition de la propriétégrid-template.
07 Avril 2011Document de travail.
29 Septembre 2016Candidat à la recommandation.
-
Module CSS - Mise en page par grille - Niveau 2
Ce niveau 2 de la spécification sur les grilles introduit la notion de sous-grille. Il s'agit de grille imbriquées dans une autre, avec conservation des alignement de colonnes et/ou de lignes.
Concernantgrid-template. 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 2018Document de travail.18 Août 2020Candidat à la recommandation. -
Module CSS - Mise en page par grille - Niveau 3
Le niveau 3 de la spécification introduit une nouvelle notion : les grilles maçonnerie. Il s'agit de grilles dont seules les colonnes ou les lignes sont figées, l'autre dimension pouvant évoluer en fonction de la taille des éléments contenus. Ceci a nécessité l'ajout de plusieurs propriétés.
Concernantgrid-template. Pas de changement impactant directement la propriétégrid-template.19 Septembre 2024Document de travail.
Autres pages concernant les grilles.