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-columns - Propriété CSS

grid-template-columns

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

Description rapide
Définition du nombre et de la largeur des colonnes d'une grille.
Statut
Standard
Valeurs prédéfinies
none | min-content | max-content | fit-content() | repeat() | subgrid
Pourcentages
Calculés par rapport à la largeur du container grille.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Progressive si les largeurs sont exprimées par des valeurs numériques. Brutale dans le cas contraire.
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-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% ────❱
CSS 1
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.
CSS 2
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.
CSS 3
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 ────❱
CSS 1
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.
CSS 2
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.
CSS 3
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 [ ]

grid-template-columns:[gauche] 1fr [centre] 3fr [droite] 1fr;

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).

Syntaxes pour grid-template-columns.

  • length est une valeur numérique suivie d'une unité de dimension.
  • % est un pourcentage dont l'évaluation correspond à une dimension.
  • fr est une valeur numérique suivie de l'unité fr couramment employée pour définir une largeur de colonne.
  • [string] est un nom de colonne à définir.
  • 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.
Syntaxe de grid-template-columnsSchéma syntaxique de la propriété CSS grid-template-columns (nombre et largeur des colonnes dans une grille). [string[string] none none auto auto length / % / fr length / % / fr min-content min-content max-content max-content fit-content fit-content fct() fct() subgrid subgrid [string[string]grid-template-columns;grid-template-columns;Télécharger l'image en SVG
  • 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é.

    Mise en page masonry

  • grid-template-columns: initial; grid-template-columns: inherit; grid-template-columns: revert; grid-template-columns: revert-layer; grid-template-columns: unset;

    La valeur initiale est : none.

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.

1
2
3
4
5
6

Manipulation de la propriété grid-template-columns par programme.

Écrire la valeur de grid-template-columns en Javascript.

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.

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

Lire la valeur de grid-template-columns avec Javascript.

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.

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

Lire la valeur calculée de grid-template-columns avec Javascript.

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.

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

Écrire la valeur de grid-template-columns avec JQuery.

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

Lire la valeur calculée de grid-template-columns avec JQuery.

JQuery
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.

grid-template-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 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 subgrid.

Colonne 1
Prise en charge des conteneurs grille et de la propriété grid-template-columns.
Colonne 2
Support des sous-grilles, et de la valeur subgrid dans la syntaxe de grid-template-columns.
Colonne 2
Support de la valeur masonry dans la syntaxe de grid-template-columns (mise en page du type "maçonnerie" - Voir explications plus haut).
1
grid-template-columns
2
subgrid
3
masonry
Estimation de la prise en charge en pourcentage du parc actuel.
93%
85%

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

Compatibilité avec l'ancien navigateur Internet Explorer  .

Bien que ce navigateur soit officiellement abandonnée, voici la correspondance entre la syntaxe standardisée et la syntaxe IE .

#exemple-standard { display:grid; grid-template-columns:100px 1fr 2fr }
#exemple-ie { display:-ms-grid; -ms-grid-columns:100px 25% 50%; } #exemple-ie :nth-child(1) { -ms-grid-row:1; -ms-grid-column:1; } #exemple-ie :nth-child(2) { -ms-grid-row:1; -ms-grid-column:2; } #exemple-ie :nth-child(3) { -ms-grid-row:1; -ms-grid-column:3; } #exemple-ie :nth-child(4) { -ms-grid-row:2; -ms-grid-column:1;* } ...

Voir aussi, dans le même module de standardisation que grid-template-columns.

Les spécifications CSS éditées par le W3C sont organisées en modules. grid-template-columns 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.
Largeur des colonnes et hauteur des lignes d'une grille.
Définition de zones nommées dans 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.