web-dev-qa-db-fra.com

Comment répéter les lignes de modèle de grille pour toutes les lignes

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;
19
Dmitriy Doronin

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>
24
Vadim Ovchinnikov