Применять сетку CSS только к первой строке

Question

У меня есть следующая простая сетка:

.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>

У меня есть ситуация, когда я не могу редактировать интерфейсную разметку.Мне бы хотелось, чтобы сетка применялась только к первым 3 пунктам.Возможно ли это?

Answer 1

Просто сделайте каждый элемент на 3 столбца, начиная с четвертого.Вам даже не нужно определять какой-либо шаблон.Сетка Implict сделает это за вас.

.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>

Answer 2

Вот пример без использования областей шаблона, а скорее с повторением столбцов и строк, а затем с установкой начальной и конечной точек для каждого элемента (grid-column).Вы заметите, я использовал nth-child для нацеливания на первые три li, а затем использовал 1n+4 для нацеливания на все после первых трех.

Для grid-template-rows Я установил повтор на 8, если у вас есть больше элементов в списке или список динамический.

.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>

Answer 3

.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>