grid-template-rows
Définit les lignes de la grille : leur nombre et leur hauteur.
- Valeur initiale
none- Héritée
- Non
- Animable
- oui, quand seules les valeurs changent, pour le même nombre de lignes
- S’applique à
- conteneurs grid
- JavaScript
element.style.gridTemplateRows = "auto 1fr auto"
Exemple
#.page {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 200px;
}<div class="page stage" style="gap: 8px;">
<header class="box">En-tête</header>
<main class="box">Le contenu s’étire sur l’espace disponible</main>
<footer class="box">Le pied de page reste toujours en bas</footer>
</div>Définition et utilisation
#La propriété grid-template-rows fonctionne comme grid-template-columns, mais pour les lignes. Chaque valeur est la hauteur de la ligne suivante : une longueur, un pourcentage, fr, auto ou la fonction minmax().
Les lignes en fr prennent tout leur sens quand le conteneur a une hauteur définie. L’exemple classique est la mise en page auto 1fr auto : en-tête et pied de page ajustés au contenu, et le milieu remplit tout le reste de l’écran.
S’il y a plus d’éléments que de lignes définies, le navigateur ajoute des lignes implicites dont la hauteur vient de grid-auto-rows.
Syntaxe
#grid-template-rows: none | <taille de piste>+ | repeat(…) | subgrid;Valeurs
#- Aucune ligne explicite. La hauteur vient du contenu.
- La première ligne fait 40px, la seconde occupe le reste de la hauteur.
- La seconde ligne est deux fois plus haute.
- Deux lignes de hauteur égale.
Valeurs en pratique
#none
.demo { grid-template-rows: none; }40px 1fr
.demo { grid-template-rows: 40px 1fr; }1fr 2fr
.demo { grid-template-rows: 1fr 2fr; }repeat(2, 1fr)
.demo { grid-template-rows: repeat(2, 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
#- La mise en page
auto 1fr autoavecmin-height: 100dvhcolle le pied de page en bas de l’écran, même sur des pages courtes. - Les lignes en
front besoin d’une hauteur de conteneur définie, sinon elles se comportent commeauto.
Entrées associées
#- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
- grid-auto-rowsFixe la hauteur des lignes que la grille crée automatiquement.
- grid-templateRaccourci qui règle les lignes, les colonnes et les zones nommées de la grille en une seule déclaration.
- row-gapDéfinit l’espace entre les lignes d’un conteneur flex ou grid.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.