How to repeat grid pattern lines for all rows
I am trying to create a template for rows in a grid block:
grid-template-rows: repeat(3, 150px);
I know this pattern should work for the first three lines . However, from 4 lines, this pattern doesn't work.
Can I create a template for all strings?
PS This pattern only works for the 1st line.
grid-template-rows: 150px;
+3
source to share
1 answer
Use grid-auto-rows
(auto-generated strings) instead of grid-template-rows
(manually generated strings). Will grid-auto-rows: 150px
do the trick in the current case . Demo video:
.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>
+8
source to share