Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

grid-template - Propriété CSS

grid-template

Résumé des caractéristiques de la propriété grid-template

Description rapide
Largeur des colonnes et hauteur des lignes d'une grille.
Statut
Standard
Pourcentages
Voir les propriétés individuelles.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Voir les propriétés individuelles.
Type d'animation
Voir les propriétés individuelles.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
 🡇  
 🡅  
Statut du document:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

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 :

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.

A
B
C
D
E
F
G
H
I
J
K
L

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.

Logo
Titre
Ariane
Droite
Menu
Contenu

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.

Logo
Titre
Ariane
Droite
Menu
Contenu

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.

1
2
3
4
5
6
7
8
9
10
11
12

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
grid-template
Estimation de la prise en charge en pourcentage du parc actuel.
93%

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.

Propriétés.

Propriété raccourcis définissant les principaux paramètres d'une grille.
Positionne un élément dans une zone nommée de la grille.
Mode de calcul des colonnes 'auto' dans une grille.
Mode de calcul de l'emplacement des éléments dans la grille.
Mode de calcul de la hauteur 'auto' des lignes dans une grille.
Numéro de colonne(s) d'un élément dans une grille.
Numéro de la colonne de fin d'un élément dans une grille.
Numéro de la colonne de début d'un élément dans une grille.
Numéro des lignes d'un élément dans une grille.
Numéro de la ligne de fin d'un élément dans une grille.
Numéro de la ligne de départ d'un élément dans une grille.
Définition de zones nommées dans une grille
Définition du nombre et de la largeur des colonnes d'une grille.
Définition du nombre et de la hauteur des lignes d'une grille.

Fonctions.

Renvoie une valeur comprise dans une fourchette.
Répète une valeur un certain nombre de fois.