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
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que grid-template
.
Les spécifications CSS éditées par le W3C sont organisées en modules. grid-template
fait partie du Module CSS - Mise en page par grille (CSS Grid Layout Module). Les définitions suivantes sont également décrites dans ce même module.