Propriété CSS grid-template-columns
Utilisez la propriété CSS grid-template-columns pour définir la taille et la largeur des colonnes. Découvrez comment utiliser ses valeurs.
La propriété grid-template-columns définit le nombre de colonnes dans une mise en page CSS Grid et la largeur (taille de piste) de chacune d'elles. Elle s'applique au conteneur de grille — l'élément avec display: grid — et chaque valeur de la liste crée une piste de colonne explicite.
Cette page couvre les mots-clés et fonctions de dimensionnement de piste que vous pouvez lui passer (fr, repeat(), minmax(), auto, fit-content()), quand utiliser chacun d'eux, et les pièges courants. Pour l'équivalent sur les lignes, voir grid-template-rows ; pour définir colonnes et lignes ensemble, voir grid-template.
| Valeur initiale | none |
|---|---|
| S'applique à | Les conteneurs de grille. |
| Hérité | Non. |
| Animatable | Oui. Les colonnes sont animables. |
| Version | CSS Grid Layout Module Level 1 |
| Syntaxe DOM | object.style.gridTemplateColumns = "40px 40px 40px"; |
Syntaxe
CSS grid-template-columns
grid-template-columns: none | auto | max-content | min-content | minmax() | <length> | <percentage> | <flex> | fit-content | repeat | initial | inherit;Exemple de la propriété grid-template-columns :
Exemple de code CSS grid-template-columns
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
background-color: #ccc;
padding: 10px;
margin-top: 20px;
}
.example > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-columns property example</h2>
<div class="example">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>Ici, 1fr 1fr 1fr 1fr crée quatre colonnes de largeur égale. L'unité fr (« fraction ») répartit l'espace restant dans le conteneur après soustraction des gouttières, de sorte que les quatre pistes restent toujours égales quelle que soit la largeur de l'écran. Les huit éléments se répartissent sur deux lignes implicites car il n'y a que quatre colonnes.
Résultat
Exemple de grid-template-columns appliqué à un conteneur de grille :
Exemple de longueur CSS grid-template-columns
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 40px 150px auto 80px;
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.grid-container > div {
background-color: #eee;
text-align: center;
padding: 30px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h2>Grid-template-columns property example</h2>
<div class="grid-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>Mélanger des pistes fixes et flexibles est le schéma le plus courant en pratique. Dans l'exemple ci-dessus, la première colonne fait exactement 40px, la deuxième 150px, la quatrième 80px, et la troisième (auto) absorbe l'espace restant.
Mots-clés et fonctions de dimensionnement de piste
Il est rare de lister chaque colonne manuellement. Ces mots-clés et fonctions permettent de garder la valeur concise et responsive.
repeat() — éviter les répétitions
repeat(count, size) se développe en count pistes de la taille donnée. grid-template-columns: repeat(4, 1fr) est identique à 1fr 1fr 1fr 1fr. Combiné avec auto-fill/auto-fit, il adapte autant de pistes que le conteneur le permet — c'est la base des grilles de cartes responsives :
/* As many 200px+ columns as fit; each grows to fill the row. */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));minmax() — définir un plancher et un plafond
minmax(min, max) permet à une piste de croître et de rétrécir entre deux bornes. minmax(200px, 1fr) ne descend jamais en dessous de 200px mais s'étend pour partager l'espace disponible. Utilisez-le pour empêcher les colonnes de s'effondrer sur les petits écrans.
fr — partager l'espace restant
L'unité fr distribue l'espace restant après les tailles fixes et les gouttières. 2fr 1fr rend la première colonne deux fois plus large que la seconde. Contrairement aux pourcentages, fr tient déjà compte de la gouttière, donc les colonnes ne débordent pas du conteneur.
auto, max-content, min-content, fit-content()
auto dimensionne une piste selon son contenu mais lui permet de s'étendre ; max-content la rend aussi large que son contenu le plus long sans rupture ; min-content la réduit au minimum autorisé par son contenu ; fit-content(300px) se comporte comme auto mais ne dépasse jamais la limite indiquée.
Essayez ensemble
<!DOCTYPE html>
<html>
<head>
<title>grid-template-columns with repeat and minmax</title>
<style>
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px;
background-color: #ccc;
padding: 10px;
}
.cards > div {
background-color: #6b9b37;
color: #fff;
text-align: center;
padding: 30px 0;
font-size: 24px;
}
</style>
</head>
<body>
<h2>Responsive columns</h2>
<div class="cards">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>Redimensionnez l'aperçu : le nombre de colonnes change automatiquement tandis que chaque carte conserve une largeur d'au moins 120px.
Valeurs
| Valeur | Description | Essayer |
|---|---|---|
| none | Il s'agit de la valeur par défaut de la propriété. | Essayer » |
| auto | La taille de la piste est déterminée par son contenu, mais peut s'agrandir pour occuper l'espace disponible. | Essayer » |
| max-content | La taille de chaque colonne dépend de l'élément le plus grand dans la colonne. | Essayer » |
| min-content | La taille de chaque colonne dépend de l'élément le plus petit dans la colonne. | Essayer » |
| minmax(min, max) | La plage de taille est supérieure ou égale à « min » et inférieure ou égale à « max ». | Essayer » |
<length> | La taille des colonnes est spécifiée par une valeur de longueur. | Essayer » |
<percentage> | La taille des colonnes est spécifiée en pourcentages. | Essayer » |
<flex> | Une dimension non négative avec l'unité « fr » qui spécifie le facteur flex de la piste. Chaque piste de taille <flex> partage l'espace restant proportionnellement à son facteur flex. | Essayer » |
| fit-content | Représente min(max-content, max(auto, argument)), similaire à auto (c'est-à-dire minmax(auto, max-content)), mais la taille est supérieure au minimum auto. | Essayer » |
| repeat | Représente un fragment répété de la liste de pistes, permettant d'écrire sous une forme plus compacte un grand nombre de colonnes présentant un schéma récurrent. | Essayer » |
| initial | Force la propriété à utiliser sa valeur par défaut. | Essayer » |
| inherit | Hérite de la propriété depuis son élément parent. | Essayer » |
Propriétés associées
grid-template-rows— le même principe pour les pistes horizontales (lignes).grid-template-areas— nommer les régions de la grille et y placer des éléments par nom.grid-template— raccourci qui définit lignes, colonnes et zones en une seule déclaration.grid-auto-columns— dimensionne les colonnes implicites créées au-delà de votre gabarit explicite.grid— le raccourci complet pour toute une définition de grille.