Les rangées
On peut définir la hauteur des rangées
Définition : hauteur des n premières rangées
1
main {2
display: grid;
3
grid-template-rows: 50px 70px;
4
}
la première rangée de 50px, la deuxième de 70px, les autres en auto.
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-template-rows
Définition : hauteur des rangées
1
main {2
display: grid;
3
grid-auto-rows: 30px;
4
}
Les rangées auront 30px de hauteur.
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-template-rows
1
main {2
display: grid;
3
grid-auto-rows: 30px 50px;
4
}
La hauteur des rangées suit le motif. La première 30px la deuxième 50px et ainsi de suite.
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-template-rows
Définition : Combinaison
1
main {2
display: grid;
3
grid-template-rows: 60px 80px;
4
grid-auto-rows: 50px 25px;
5
}
Les deux premières rangées 60px et 80px, les suivantes suivent le motif : 60px 80px 50px 25px 50px 25px ...
Contenu 1
Contenu 2
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 8
Contenu 9
grid-template-rows
Définition : Min et Max
1
main {2
display: grid;
3
grid-auto-rows: minmax(40px, auto);
4
}
La hauteur min est de 40px et la hauteur max est en auto.
Contenu 1
Contenu 2
Contenu 3
Contenu 3
Contenu 3
Contenu 3
Contenu 3
Contenu 3
Contenu 3
Contenu 3
Contenu 3
Contenu 4
Contenu 5
Contenu 6
Contenu 7
Contenu 7
Contenu 7
Contenu 7
Contenu 7
Contenu 7
Contenu 7
Contenu 8
Contenu 9
grid-template-rows