49

I'm trying create template for rows in my grid block:

grid-template-rows: repeat(3, 150px);

I know, this template should be work for first 3 rows. However, from 4 row this template is not work.
Can i make template for all rows?

P.S. This template work only for 1st row.

grid-template-rows: 150px;
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Dmitriy Doronin
  • 728
  • 1
  • 7
  • 13

1 Answers1

92

Use grid-auto-rows (automatically generated rows) instead of grid-template-rows (manually generated rows). In current case grid-auto-rows: 150px will do the trick. Demo:

.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>
Vadim Ovchinnikov
  • 13,327
  • 5
  • 62
  • 90
  • 4
    why `grid-template-rows: repeat(auto-fit, 200px)` and `grid-template-columns: repeat(auto-fit, 200px)` works differently? I mean `grid-template-rows` only repeats first row, but `grid-template-columns` repeats all columns. – NanoNova Aug 29 '20 at 06:28
  • 3
    @NanoNova Because your grid have default width of 100% of its container but default height is `auto`. Hope it makes sense to you. – Vadim Ovchinnikov Aug 29 '20 at 19:12
  • idk why, but it was so difficult to find this simple property (`grid-auto-rows`). Thank you! +1 – Hafiz Temuri Jul 17 '22 at 07:15