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 :

CSS - 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 largeur des colonnes, nombre et hauteur des lignes, zones nommées...

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

Vous pouvez également consulter la page sur grid 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, grid-template est utilisé pour définir la hauteur des 3 lignes et la largeur des 4 colonnes de la grille.

Un code spécial sera à prévoir pour Internet Explorer car ce navigateur ne traite pas les propriétés relatives aux grilles de la façon standardisée. De plus IE ne traite pas le placement automatique des cellules : il faut donc positionner chacune des cellules sur leur ligne et leur colonne.

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 'a', 'b', 'c', 'd' et 'e'. Reportez-vous à la propriété grid-template-areas pour plus de détail sur les plages nommées dans une grille.

Remarque : Internet Explorer ne traite pas les zones nommées. Nous présentons le code équivalent mais qui ne fait pas intervenir grid-template.

A
B
C
D
E
F

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.

A
B
C
D
E
F

Prise en charge par les navigateurs (compatibilité).

La prise en charge des grilles est globalement assez bonne, sauf pour Internet explorer qui traite les propriétés relatives aux 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é.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis définissant les principaux paramètres d'une grille.
  • grid-area : Positionne un élément dans une zone nommée de la grille.
  • grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.
  • repeat() : Répète une valeur un certain nombre de fois.