Grid-template-columns - Propriété CSS

(1) L'animation est progressive si les largeurs sont exprimées par des valeurs numériques. Brutale dans le cas contraire.

Syntaxe de grid-template-columns (schéma).

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• length est une valeur numérique suivie d'une des unités de dimension. L'unité fr est particulièrement utile pour cet usage.
• % est un pourcentage calculé par rapport à la largeur du conteneur grille.
• [string] est un nom de colonne à définir. Ce nom est inscrit entre crochets, sans guillemets ni apostrophes.
• fct() est l'une des nombreuses fonctions proposées par CSS pour calculer une dimension : fit-content(), , etc.
• Cette syntaxe doit être répétée autant de fois qu'il y a de colonnes à définir ans la grille.

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 sur les grilles.

L'unité fr.

Cette grille montre la difficulté de mélanger des colonnes en largeur fixe, par exemple parce qu'elles contiennent des images, avec des colonnes de largeur variable exprimée en pourcentage (celles qui contiennent du texte). La première colonne a été définie avec 110 pixels de large. Il est difficile de savoir ce que cela représente en pourcentage de la largeur du container. En réduisant la largeur de la fenêtre du navigateur, vous verrez que les cellules débordent de la grille car le pourcentage calculé pour une largeur donnée du conteneur n'est valable que pour cette largeur, à cause de la première colonne qui est en largeur fixe.

❰─ 110px ─❱

❰────────── 50% ──────────❱

❰──── 25% ────❱

Le premier projet de norme CSS est publié en novembre 1995. Il devient une recommandation en décembre 1996.

Une cinquantaine de propriétés, qui concernent essentiellement la mise en forme du texte.

En novembre 1997, un complément (appelé CSS2) est mis en chantier, et une première proposition est publiée par le W3C.

Une centaine de propriétés. Certaines ont été abandonnées depuis.

En 1999, le développement du troisième niveau des feuilles de styles en cascade commence (CSS3).

CSS devient modulaire. Dès lors, le degré d'avancement de CSS3 varie selon les modules.

Dans cette 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.

❰─ 110px ─❱

❰────────── 2fr ──────────❱

❰──── 1fr ────❱

Le premier projet de norme CSS est publié en novembre 1995. Il devient une recommandation en décembre 1996.

Une cinquantaine de propriétés, qui concernent essentiellement la mise en forme du texte.

En novembre 1997, un complément (appelé CSS2) est mis en chantier, et une première proposition est publiée par le W3C.

Une centaine de propriétés. Certaines ont été abandonnées depuis.

En 1999, le développement du troisième niveau des feuilles de styles en cascade commence (CSS3).

CSS devient modulaire. Dès lors, le degré d'avancement de CSS3 varie selon les modules.

Nommage des colonnes.

La propriété grid-template-columns peut également nommer les colonnes, ce qui rend plus facile et plus clair le positionnement manuel des éléments dans une cellule avec grid-column. Notez la syntaxe : le nom à définir est inscrit entre crochets droits [ ]

Nommage implicite de plages.

Lorsque deux colonnes sont nommées avec des noms qui se terminent par start et par end en ayant un début identique, ils définissent également un nom pour la plage comprise entre ce deux colonnes. Exemple : si les noms menu-start et menu-end sont définis, ils créent une plage nommée menu qui s'étend depuis la colonne menu-start jusqu'à la colonne menu-end.

Cette plage peut ensuite être utilisée pour définir l'emplacement des éléments (voir grid-area).

Valeurs pour grid-template-columns.

• grid-template-columns: none;

  Les colonnes ne sont pas créées : la grille ne comporte qu'une seule colonne. Cependant si un des éléments comporte une propriété grid-column qui le positionne dans une colonne, cette colonne et toutes celles qui la précédent sont créées.

  Dans ce cas, 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 disponible dans le container grille et sur la taille des contenus dans chacune des colonnes.

  1

  2
  Ceci est une cellule dont le contenu est plus long que celui des autres cellules

  3
  Contenu

  4
  Contenu moyennement long

  5

  6
  grid-template-columns:auto auto auto;
• grid-template-columns: 150px 100px 60px;

  Trois colonnes sont définies. Leur largeur ne dépend de rien d'autre que des valeurs indiquées. Les valeurs doivent être positives ou nulles. La largeur totale des colonnes peut ne pas correspondre à celle du conteneur. Les cellules peuvent alors déborder ou laisser de l'espace disponible dans le conteneur, comme c'est le cas dans notre exemple.

  grid-template-columns:150px 100px 80px;
• grid-template-columns: 25% 25% 25% 25%;

  Quatre colonnes sont définies. Leur largeur est calculée en pourentage de la largeur du conteneur. Si la somme des pourcentages ne donne pas 100%, la largeur totale des colonnes peut ne pas correspondre à celle du conteneur. Les cellules peuvent alors déborder du conteneur ou laisser de l'espace vide.

  De plus, l'espace entre les cellules (définis par grid-gap n'est pas pris en compte dans le calcul. comme on le voit sur l'exemple ci-dessous, les colonnes débordent finalement la largeur du conteneur bien que 4 x 25% donne pourtant bien 100%. Le pourcentage n'est finalement pas une unité très pratique pour définir la largeur des colonnes d'une grille.

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

  Une série de trois valeurs, qui définissent donc trois colonnes dans les largeurs indiquées. L'unité fr est évaluée par rapport à la place restante dans le conteneur grille. Dans cet exemple, l'espace restant est réparti entre les colonnes dont la largeur est exprimée en fr, soit un tiers pour la colonne numéro 2 et deux tiers pour la troisième colonne.

  Il est donc facile de mixer des dimensions dans une unité absolue (comme le pixel) avec des dimensions exprimées en fr : l'espace disponible sera toujours exploité au mieux. Les espaces entre les cellules sont pris en compte dans le calcul. En faisant varier la largeur de la fenêtre du navigateur, vous constaterez que la largeur des colonnes s'adaptent, tout en donnant toujours un résultat satisfaisant : en particulier le conteneur est toujours utilisé au mieux, et sans débordement.

  grid-template-columns:200px 1fr 2fr;
• 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. Voir max-content.

  Bien entendu, si toutes les colonnes sont définies avec max-content, les cellules peuvent déborder du conteneur.

  Contenu court

  Contenu un peu plus long

  Contenu moyennement long

  Contenu court
  grid-template-columns:max-content max-content;
• grid-template-columns: min-content min-content;

  Définit deux colonnes dont la largeur est déterminée en fonction du contenu, en insérant le plus possible de retours à la ligne dans le texte. Comme avec max-content la largeur totale des colonnes peut être inférieure ou supérieure à celle du conteneur.

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

  Contenu court

  Un peu plus long

  Texte court

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

  La valeur fit-content et la fonction fit-content() donne des résultats comparables, mais la fonction permet en plus d'indiquer une largeur maximale.
  Valeur et fonction déterminent une largeur de colonne optimale, en prenant en compte la valeur disponible dans le conteneur et le contenu dans la colonne. Reportez vous la page sur la valeur fit-content et la fonction fit-content pour des explications plus complètes.

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

  Contenu court

  Un peu plus long

  Troisième cellule

  Texte court

  Contenu court

  Contenu court
  grid-template-columns:fit-content(200px) fit-content(100px);
• grid-template-columns: [gauche] 200px [centre] 1fr [droite] 2fr;

  Cette syntaxe définit trois colonnes avec leur largeur et en leur affectant un nom. Les noms doivent être indiqués entre crochets.

  Ces noms peuvent ensuite être utilisés à la place des numéros de colonne pour définir l'emplacement des éléments dans la grille.
  Les noms de colonne facilitent les modifications qu'il sera peut-être nécessaire d'apporter par la suite : il est facile par exemple d'insérer une colonne au milieu de la grille sans avoir à renuméroter les emplacements de tous les éléments.

  Lorsque des noms sont spécifiés sous la forme xxx-start et xxx-end ils définissent, en plus de ces deux noms de colonne, un nom pour la plage qui s'étend entre les deux colonnes. Dans notre exemple, la plage se nommerait xxx.

• grid-template-columns: repeat(20, 1fr);

  La fonction repeat() facilite l'énumération des colonnes nombreuses de largeurs identiques. Ici vingt colonnes de largeur identique, occupant occupant toute la place restante dans le conteneur grille.

  La syntaxe de repeat() est très souple. On peut par exemple déclarer 20 colonnes alternant deux largeurs différentes avec la syntaxe
  grid-template-columns: repeat(10, 1fr 2fr);

  Voyez la page sur la fonction repeat() pour une présentation détaillée de sa syntaxe.

• grid-template-columns: subgrid;

  La valeur subgrid s'utilise dans le cas d'un conteneur grille imbriqué dans un autre (sous-grille). Les colonnes de la grille interne seront alors alignées sur celles de la grille principale. Pour que cela ait un intérêt, la gille interne doit s'étendre sur plusieurs colonne de la grille principale.

  L'exemple ci-après montre une grille interne (en vert) incluse dans un grille principale. La grille interne s'étend sur deux des colonnes de la grille principale. La valeur subgrid évite de définir les colonnes de la grille interne, en les alignant sur les colonnes de la grille principale.

  Propriété appliquée sur le conteneur grille vert :
  grid-template-columns:subgrid;
• grid-template-columns: masonry; ⚠

  La valeur masonry s'utilise sur l'axe inline. Elle est donc utilisable avec grid-template-columns sur les grilles remplies colonnes par colonnes. Elle indique que les éléments ne sont pas forcément alignés en colonnes, mais complètent les espaces disponibles laissés par la colonne précédente.

  Voici ce que donnerait une mise en page du type "maçonnerie", avec les styles et le résultat correspondants. Pour l'instant il s'agit d'une simulation car les navigateurs ne prennent pas encore en charge cette fonctionnalité.

  

• grid-template-columns: initial; (none) grid-template-columns: inherit; grid-template-columns: revert; grid-template-columns: revertLayer; grid-template-columns: unset;

  Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'animation de la propriété grid-template-columns.

L'animation de grid-template-columns est normalement progressive, mais seul Firefox le fait correctement. Les autres navigateurs passent brutalement de la valeur de départ à la valeur finale.

Dans tous les cas, l'utilisation des valeurs prédéfinies comme min-content ou max-content force une animation brutale de la première à la derniere valeur.

La propriété grid-template-columns et Javascript.

Avec Javascript, modifier la valeur de grid-template-columns.

En Javascript, voici comment modifier la valeur de grid-template-columns. Javascript propose une syntaxe avec la notation typique de css, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots) plus courante en Javascript.

let el = document.getElementById('id'); el.style['grid-template-columns'] = '100px 1fr 1fr'; // ou let el = document.getElementById('id'); el.style.gridTemplateColumns = '100px 1fr 1fr';

Avec Javascript, lire la valeur de grid-template-columns.

Ce code fonctionne si la propriété a été affectée directement à l'élément lui-même et pas en passant par un sélecteur.

let el = document.getElementById('id'); let value = el.style['grid-template-columns']; // ou let el = document.getElementById('id'); let value = el.style.gridTemplateColumns;

Avec Javascript, lire la valeur calculée de grid-template-columns.

La valeur calculée est celle qui résulte de l'évaluation des unités relatives (en particulier des pourcentages et des valeurs en fr) et de la prise en compte des valeurs héritées éventuelles.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('grid-template-columns');

Avec JQuery, modifier la valeur de grid-template-columns.


$('#id').css('grid-template-columns', '100px 1fr 1fr');
// ou
$('#id').css('gridTemplateColumns', '100px 1fr 1fr');


Avec JQuery, lire la valeur calculée de grid-template-columns.

let value = $('#id').css('grid-template-columns');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété et affiche ensuite la valeur telle qu'elle a été appliquée et valeur calculée. La valeur calculée permet de voir comment est sérialisée (mémorisée) la valeur de grid-template-columns.

Simulateur avec la propriété grid-template-columns.

Prise en charge de grid-template-columns par les navigateurs.

La prise en charge de la propriété grid-template-columns est globalement bonne, sauf pour les valeurs récemment définies comme masonry.

Remarques :

(1) Internet Explorer utilise la propriété non standard -ms-grid-columns.

(2) Désactivé par défaut. Peut être activé en positionnant le flag layout.css.grid-template-masonry-value.enabled à true.

1

Propriété
grid-template-columns

2

Valeur
subgrid

3

Valeur
masonry

Estimation de la prise en charge globale.

95%

91%

0%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

2

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Évolution de la propriété grid-template-columns.

• Module CSS - Mise en page par grille - Niveau 1

  Introduction des mises en page avec grille.
  Définition des propriétés en rapport avec les grilles, dont grid-template-columns.
  

  07 Avril 2011

  Document de travail.

  

  29 Septembre 2016

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 2

  Ajout de la notion de sous-grille.
  La propriété grid-template-columns accepte la nouvelle valeur subgrid.
  

  06 Février 2018

  Document de travail.

  

  18 Août 2020

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 3

  La principale nouveauté de ce niveau 3 de la spécification est l'introduction des grilles du type "Maçonnerie" (Masonry).
  La nouvelle valeur masonry est utilisable avec la propriété grid-template-columns.
  

  19 Septembre 2024

  Document de travail.

  

  

  

Voir aussi, dans le module CSS - Mise en page par grille.

Propriétés :

Fonctions :