尝试使用不同的类名称通过CSS Grid在两个单独的行中对项目进行分组。它可以正常工作，直到“红色”组中的元素没有预定义的行（本例为3）为止。
我可以以某种方式将第四个“红色”元素放在新行中吗？
如果只有3个“红色”元素，则一切正常。
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>