grid-template-columns
Définit les colonnes de la grille : leur nombre et leur largeur.
- Valeur initiale
none- Héritée
- Non
- Animable
- oui, quand seules les valeurs changent, pour le même nombre de colonnes
- S’applique à
- conteneurs grid
- JavaScript
element.style.gridTemplateColumns = "1fr 2fr"
Exemple
#.courses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}<div class="courses stage">
<div class="box">HTML i CSS</div><div class="box">JavaScript</div><div class="box">TypeScript</div>
<div class="box">Python</div><div class="box">React</div>
</div>Définition et utilisation
#La propriété grid-template-columns est le cœur de la mise en page CSS Grid. Chaque valeur de la liste représente une colonne, donc 200px 1fr 1fr crée trois colonnes : la première de largeur fixe, et deux qui partagent le reste de l’espace à égalité.
L’unité fr représente une fraction de l’espace libre, et la fonction repeat() raccourcit les motifs répétitifs. L’écriture repeat(auto-fill, minmax(160px, 1fr)) crée autant de colonnes d’au moins 160px qu’il en tient, sans aucune requête @media.
Les éléments de la grille se placent automatiquement dans les cellules suivantes, ligne après ligne. Les lignes que vous ne définissez pas apparaissent toutes seules et reçoivent leur hauteur de grid-auto-rows.
Syntaxe
#grid-template-columns: none | <taille de piste>+ | repeat(…) | subgrid;Valeurs
#<longueur>
Deux colonnes de largeur fixe.<fr>
La deuxième colonne est deux fois plus large que la première.repeat()
Trois colonnes égales.- Une colonne fixe, une élastique et une ajustée au contenu.
repeat(auto-fill, minmax(70px, 1fr))
auto-fill + minmax()
Autant de colonnes d’au moins 70px qu’il en tient. La grille s’ajuste seule à la largeur disponible.
Valeurs en pratique
#100px 100px
.demo { grid-template-columns: 100px 100px; }1fr 2fr
.demo { grid-template-columns: 1fr 2fr; }repeat(3, 1fr)
.demo { grid-template-columns: repeat(3, 1fr); }80px 1fr auto
.demo { grid-template-columns: 80px 1fr auto; }repeat(auto-fill, minmax(70px, 1fr))
.demo { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#minmax(160px, 1fr)avecauto-fillouauto-fitest la grille de cartes responsive la plus simple, sans requête sur la largeur de l’écran.frpartage l’espace libre, donc1fr 1frne donne pas toujours des colonnes égales avec un contenu volumineux.minmax(0, 1fr)aide dans ce cas.
Entrées associées
#- Flexbox vs GridFlexbox aligne les éléments sur un axe et s’adapte à leur contenu, alors que Grid organise une grille à deux dimensions, en lignes et colonnes, où vous les placez.
- grid-template-rowsDéfinit les lignes de la grille : leur nombre et leur hauteur.
- grid-template-areasDécrit la mise en page de la grille avec des zones nommées, presque comme un dessin dans le code.
- gapDéfinit l’espace entre les éléments d’un conteneur flex, grid ou multi-colonnes.
- grid-auto-flowDécide comment les éléments sans position définie remplissent la grille.
- grid-columnDétermine dans quelles colonnes de la grille un élément commence et se termine.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.