Nombre et largeur des rangées dans les grilles CSS
Les éléments de la grille peuvent également être placés
sur des rangées. La propriété grid-template-rows
est destinée à cela.
Cette propriété accepte, séparés par des espaces,
les tailles des rangées. On peut y appliquer
les mêmes valeurs que celles que nous avons étudiées
pour les colonnes.
Exemple
Par exemple, plaçons les blocs sur quatre rangées :
<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: 600px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Définissons une largeur fixe en pixels pour les première et troisième rangées, et laissons la deuxième rangée occuper l'espace restant :
<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: 600px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Utilisons la fonction repeat
pour spécifier les tailles des rangées :
<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: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Exemple
Attribuons une hauteur de 50px aux rangées,
et définissons le nombre de rangées
automatiquement à l'aide de
la valeur auto-fill :
<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;
}
:
Tâches pratiques
Placez les blocs sur trois rangées.
Que le premier bloc ait
une taille de 100px,
le deuxième de 150px,
et le troisième de 200px.
Supposons que votre grille ait trois rangées. Faites en sorte qu'elles aient la même largeur.
