Only apply css grid to first row

Question

I have the following simple grid:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

<ul class="grid">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

I have a situation where I'm not able to edit the front-end markup. I'd only like the grid to be applied to the first 3 items. Is this possible?

Answer 1

Simply make each element to span 3 column starting from the fourth one. You don't even need to define any template. The implict grid will do it for you.

.grid {
  display: grid;
}
.grid :nth-child(n + 4) {
  grid-column:span 3;
}

<ul class="grid">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>