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-columns

Contenu de la page :

Description de la propriété grid-template-columns.

grid-template-columns définit le nombre et la largeur des colonnes d'une grille. Cette propriété accepte une série de valeurs séparées par des espaces. Le nombre de valeurs indique le nombre de colonnes. Chacune des valeurs indique la largeur d'une colonne.

Pour davantage d'informations sur les grilles reportez-vous au tutoriel grilles CSS ou à la propriété grid.

Exemples.

Exemple - Utilisation des pourcentages.

Dans ce premier exemple, les largeurs de colonnes sont définies en pourcentages. Arrangez-vous pour que leur somme fasse bien 100% car le navigateur n'appliquera pas de correction. On peut donc avoir des cellules qui débordent de la grille ou au contraire qui ne la remplissent pas complètement (comme sur notre exemple).

Sur un ordinateur de bureau, vous pouvez réduire la largeur de la fenêtre du navigateur et constater que les largeurs de colonnes s'adaptent en conséquence.

Largeurs de colonnes définies en pourcentages.
A
B
C
D

Exemple 2 - L'unité fr.

Nous présentons ici deux grilles. La première comporte une erreur : la première largeur a été définie en unité absolue (pixels), tandis que les autres largeurs sont définies en pourcentages. En réduisant la largeur de la fenêtre du navigateur, vous constaterez que les cellules finissent par déborder la largeur totale de la grille.

Dans la deuxième grille, notez l'usage de l'unité fr (fraction). Et notez également que quelque soit la largeur de la fenêtre, les cellules occupent toujours la largeur exacte de grille. L'unité fr est calculée par rapport à l'espace restant disponible, contrairement au pourcentage qui est calculé par rapport à la largeur totale de la grille. L'unité fr permet de mélanger facilement des colonnes de largeur fixe et des colonnes de largeur proportionnelle.

Largeur mélangeant unités absolues et pourcentages
A
B
C
D

Largeurs de colonnes définies avec l'unité fr.
A
B
C
D

Exemple 3 - Nommer les colonnes.

Cet exemple montre comment utiliser grid-template-columns pour nommer les colonnes, ce qui rend plus clair le positionnement manuel des cellules avec grid-column. Notez la syntaxe : le nom est inscrit entre crochets droits [ ]

Remarque : les nommage des colonnes n'est pas supporté par Internet Explorer.

Utilisation des noms de colonnes.
A
B
C
D

Syntaxes pour grid-template-columns.

  • grid-template-columns: none;

    Valeur par défaut. Les colonnes ne sont créées que si c'est nécessaire, par exemple si un des éléments comporte une propriété grid-column qui le positionne dans cette colonne.

    La largeur des colonnes est définie par la propriété grid-auto-columns.

  • grid-template-columns: auto auto auto;

    Puisqu'il y a trois valeurs, trois colonnes sont créées. Leur largeur est déterminée en se basant sur la place restant disponible dans le container et sur la taille des contenus dans chacune des colonnes.

  • grid-template-columns: max-content max-content;

    Définit deux colonnes dont la largeur est déterminée en fonction du contenu le plus grand trouvé dans chacune des colonnes. La taille du contenu est déterminée sans insérer de sauts de ligne dans le texte.

    max-content est utile lorsqu'on ne souhaite pas de retours à la ligne dans le texte de la colonne.

  • grid-template-columns: min-content min-content;

    Définit deux colonnes dont la largeur est déterminée en fonction du contenu le plus grand trouvé dans chacune des colonnes. La taille du contenu est déterminée en insérer le plus possible de sauts de ligne dans le texte.

    On utilise min-content lorsqu'il est nécessaire d'avoir une colonne le plus étroite possible.

  • grid-template-columns: 200px 1fr 2fr;

    Une série de trois valeurs, qui définissent donc trois colonnes dans les largeurs indiquées. Les nombres doivent être positifs ou nuls, suivi d'une unité de dimensions (voir les unités de dimensions en CSS).

    Les pourcentages sont évalués par rapport à la largeur du container grille.

    L'unité fr est particulièrement adaptée au dimensionnement des colonnes. Elle est évaluée par rapport à la place restante dans la largeur de la grille. Il est possible de mixer des dimensions dans une unité absolue (comme le pixel) avec des dimensions exprimées en fr : l'espace disponible est toujours exploité au mieux.

  • grid-template-columns: repeat(20, 5%);

    La fonction repeat() facilite l'énumération des colonnes nombreuses de largeurs identiques. Ici vingt colonnes occupant chacune 5% de la largeur de la grille.

  • grid-template-columns: fit-content(200px) fit-content(100px);

    La fonction fit-content() détermine une largeur de colonne optimale, en prenant en compte la valeur indiquée et le contenu dans cette colonne. Reportez vous la page sur la fonction fit-content() pour des explications plus complète.

    D'autres fonctions, comme minmax() peuvent également être utiles pour dimensionner des colonnes.

  • grid-template-columns: initial;

    La valeur initiale est none.

  • grid-template-columns: unset; grid-template-columns: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Ajouter un préfixe :
grid-template-columns :
-ms-grid-columns :
1958
Les Laboratoires Bell créent le premier Modem.
1969
Création du Network Working Group et connexion des premiers ordinateurs entre quatre universités américaines.
1971
23 ordinateurs sont reliés sur ARPANET. Envoi du premier courriel.
1973
L'Angleterre et la Norvège rejoignent le réseau ARPANET.
1973
Définition du protocole TCP/IP.
1979
Création des NewsGroups (forums de discussion Usenet) par des étudiants américains.
1983
Premier serveur de noms de sites (serveur DNS).
1984
1 000 ordinateurs connectés.
1987
10 000 ordinateurs connectés.
1989
100 000 ordinateurs connectés.
1992
1 000 000 ordinateurs connectés.
1996
36 000 000 ordinateurs connectés.

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 : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans 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.