Ошибка была в grid-template-columns: repeat();
: я использовал ширину столбца minmax
, равную 9%, чтобы все десять столбцов появлялись на странице с 1fr
, чтобы распределить оставшееся пространство между желобами.
.grid-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9%, 1fr));
grid-gap: 0.5rem;
height: 100vh;
}
.grid-item {
background: red;
}
<div class="grid-wrapper">
<div class="grid-item">Content D</div>
<div class="grid-item">Content E</div>
<div class="grid-item">Content J</div>
<div class="grid-item">Content K</div>
<div class="grid-item">Content D</div>
<div class="grid-item">Content E</div>
<div class="grid-item">Content J</div>
<div class="grid-item">Content K</div>
<div class="grid-item">Content L</div>
<div class="grid-item">Content D</div>
<div class="grid-item">Content E</div>
<div class="grid-item">Content J</div>
<div class="grid-item">Content K</div>
<div class="grid-item">Content L</div>
</div>
Большой или маленький, это все!;)