Propriété grid-template-columns
La propriété grid-template-columns définit
le nombre et la largeur des colonnes que
l'élément occupera dans la grille.
La propriété est spécifiée dans l'élément parent
et détermine la largeur des colonnes des éléments enfants.
Dans la valeur de la propriété, nous indiquons la largeur des colonnes
dans toutes les unités
de taille.
Lorsque des valeurs en pixels sont spécifiées dans les propriétés,
les tailles des colonnes leur correspondront exactement.
Si nous utilisons le mot-clé auto, les colonnes
rempliront tout l'espace disponible. L'utilisation
de l'unité fr (fraction) signifie
que tout l'espace sera divisé
en parts égales. L'avantage
de fr est son adaptabilité à
différents conteneurs ou résolutions d'écran,
car fr divise simplement l'espace en le nombre
de fractions spécifié sans lien avec une taille exacte en pixels.
Syntaxe
sélecteur {
grid-template-columns: largeur de colonne;
}
Exemple
Définissons la largeur des colonnes pour nos éléments dans la grille :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Attribuons aux première et troisième colonnes une largeur fixe en pixels, et laissons la deuxième colonne remplir automatiquement l'espace disponible :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Maintenant, utilisons la propriété
grid-template-columns
pour que les première et deuxième
colonnes occupent une partie du conteneur,
et la troisième colonne - trois parties :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Les valeurs spécifiées en unités fr
peuvent être fractionnaires. Modifions
l'exemple précédent en spécifiant
pour les deuxième et troisième colonnes une largeur
en nombres fractionnaires :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Utilisons dans la propriété grid-template-columns
la fonction repeat(),
qui indiquera au conteneur que toutes
les trois colonnes doivent avoir la même largeur :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Modifions maintenant l'exemple précédent pour ajouter une quatrième colonne aux trois colonnes identiques, qui occupera deux fractions du conteneur :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Attribuons aux deux premières colonnes une largeur d'une fraction du conteneur, et aux deux dernières colonnes - deux fractions :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Maintenant, définissons la largeur des colonnes
en combinant les valeurs spécifiées à l'aide de
la fonction repeat() et des unités libres fr :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
De plus, dans la fonction repeat(), on peut spécifier
la valeur auto-fill, qui remplira
notre conteneur avec des colonnes identiques de la largeur souhaitée :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Il est très pratique d'utiliser auto-fill
avec la fonction minmax,
qui définit une plage de largeurs de colonnes
allant d'une valeur minimale à une valeur maximale.
Si la largeur du conteneur ne peut pas accueillir toutes
les colonnes, certaines d'entre elles passeront
à une nouvelle ligne, tandis que les colonnes de la ligne
seront réparties uniformément. Modifions
l'exemple précédent en y spécifiant la fonction minmax.
Pour voir les différentes variantes de placement des colonnes,
modifiez la largeur de la page de votre navigateur :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Maintenant, utilisons la propriété auto-fit,
qui diffère de auto-fill en ce qu'elle
ajuste le nombre de colonnes à
la largeur disponible du conteneur, en les élargissant ou
en les rétrécissant :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
En plus de fr, on peut
utiliser des valeurs en %, qui définissent également
la partie du conteneur que la colonne occupera.
Dans ce cas, la taille de la colonne en %
sera d'abord calculée, puis l'espace libre restant
sera divisé en fractions :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Utilisons ensemble les propriétés
grid-template-columns et
grid-template-rows :
<div id="parent">
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Utilisons les propriétés
grid-template-columns et
grid-template-rows
pour créer un tableau de neuf cellules, disposées
sur trois lignes. De plus, les deuxième et troisième lignes auront la même largeur,
et chaque colonne aura une largeur différente :
<div id="parent">
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Maintenant, dans le tableau de l'exemple précédent, faisons en sorte que la ligne du haut ait une largeur de deux fractions, et la première colonne - une demi-fraction :
<div id="parent">
<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>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Voir aussi
-
la propriété
grid-template-rows,
qui définit le nombre et la hauteur des lignes dans la grille -
la propriété
grid-auto-columns,
qui définit le nombre et la largeur des colonnes dans la grille implicite
