Trying to group items in two separate line by CSS Grid using different class names. It works fine until in "red" group have no more elements then predefined rows (this case 3).
Can I somehow put the 4th "red" element in new row?
If there is only 3 "red" element, everything works fine.
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
grid-row-start: 5;
}
<ul>
<li class="blue">
<h2>1</h2>
</li>
<li class="red">
<h2>2</h2>
</li>
<li class="blue">
<h2>3</h2>
</li>
<li class="blue">
<h2>4</h2>
</li>
<li class="red">
<h2>5</h2>
</li>
<li class="red">
<h2>6</h2>
</li>
<!-- If you delete this (or any other "red") "li" element then it's working fine -->
<li class="red">
<h2>7</h2>
</li>
<li class="blue">
<h2>8</h2>
</li>
</ul>
See Question&Answers more detail:os