J'essaie de créer un modèle pour les lignes de mon bloc de grille:
grid-template-rows: repeat(3, 150px);
Je sais, ce modèle devrait fonctionner pour premières lignes. Cependant, à partir de 4 lignes ce modèle ne fonctionne pas.
Puis-je créer un modèle pour toutes les lignes?
P.S. Ce modèle ne fonctionne que pour la 1ère rangée.
grid-template-rows: 150px;
Utilisation grid-auto-rows
(lignes générées automatiquement) au lieu de grid-template-rows
(lignes générées manuellement). Dans le cas actuel grid-auto-rows: 150px
fera l'affaire. Démo:
.grid {
display: grid;
grid-auto-rows: 150px;
/* space between columns for demo */
grid-gap: 10px;
}
/* just styles for demo */
.grid__item {
background-color: tomato;
color: white;
}
<div class="grid">
<div class="grid__item">One</div>
<div class="grid__item">Two</div>
<div class="grid__item">Three</div>
<div class="grid__item">Four</div>
<div class="grid__item">Five</div>
<div class="grid__item">Six</div>
<div class="grid__item">Seven</div>
<div class="grid__item">Eight</div>
<div class="grid__item">Nine</div>
</div>