Only apply css grid to first row

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>


Here's an example without using template areas, but rather repeating columns and rows, and then setting the start and stop point for each element (grid-column). You'll notice, I used nth-child to target the first three li and then used 1n+4 to target everything after the first three.

For grid-template-rows I set the repeat at 8, in the event you have more items in your list or if your list is dynamic.

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

.grid li:nth-child(1) {
  grid-column: 1/2;
}

.grid li:nth-child(2) {
  grid-column: 3/4;
}

.grid li:nth-child(3) {
  grid-column: 5/6;
}

.grid li:nth-child(1n+4) {
  grid-column: 1/6;
}
<ul class="grid">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>


.grid {
  display: grid;
  grid-template-columns: auto auto auto;
}

.grid li:nth-child(n+4) {
  grid-column-start: 1;
  grid-column-end: 4;
}
<ul class="grid">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

Tags:

Css

Css Grid

Recent Posts