Propriété grid-template-rows
La propriété grid-template-rows définit
le nombre et la largeur des rangées que
l'élément occupera dans la grille.
Dans la valeur de la propriété, nous spécifions la largeur des rangées
dans toutes les unités
de taille.
La propriété est spécifiée dans l'élément parent
et détermine la largeur des rangées des éléments enfants.
Lorsque des valeurs en pixels sont spécifiées dans les propriétés,
les tailles des rangées leur correspondront exactement.
Si nous utilisons le mot-clé auto, les rangées
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 spécifié
de fractions sans lien avec une taille exacte en pixels.
Syntaxe
sélecteur {
grid-template-rows: largeur de la rangée;
}
Exemple
Définissons la largeur des rangées 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-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Donnons à la première et à la troisième rangée une largeur fixe en pixels, et que la deuxième rangée remplisse automatiquement l'espace disponible :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Maintenant, utilisons la propriété
grid-template-rows
pour que les première et deuxième
rangées occupent une partie du conteneur,
et la troisième rangée - trois parties :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#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 rangées une largeur
en nombres fractionnaires :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Utilisons la fonction repeat()
dans la propriété grid-template-rows,
qui indiquera au conteneur que les trois
rangées doivent avoir la même largeur :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Modifions maintenant l'exemple précédent pour ajouter une quatrième rangée aux trois rangées 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-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Donnons aux deux premières rangées une largeur d'une fraction du conteneur, et aux deux dernières rangées - deux fractions :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Maintenant, définissons la largeur des rangées
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-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
La fonction repeat() peut également utiliser
la valeur auto-fill, qui remplira
notre conteneur avec des rangées 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-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Il est très pratique d'utiliser la fonction minmax()
avec auto-fill,
qui définit une plage de largeur pour les rangées
allant d'une valeur minimale à une valeur maximale.
Si la largeur du conteneur ne peut pas contenir toutes
les rangées, certaines d'entre elles se déplaceront
sur une nouvelle ligne, tandis que les rangées de la ligne
se répartiront uniformément. Modifions
l'exemple précédent en y spécifiant la fonction minmax() :
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Utilisons maintenant la propriété auto-fit,
qui diffère de auto-fill en ce qu'elle
ajuste le nombre de rangées à
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-rows: repeat(auto-fit, minmax(100px, 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 rangée occupera.
Dans ce cas, la taille de la rangée 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-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 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 rangées. De plus, les deuxième et troisième rangées 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 rangée supérieure 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-columns,
qui définit le nombre et la largeur des colonnes dans la grille -
la propriété
grid-auto-rows,
qui définit le nombre et la largeur des rangées dans la grille implicite
