Динамически создаваемая CSS сетка

Question

Макет сетки CSS, описанный здесь , показывает, что ячейки сетки добавляются в разметку без какой-либо иерархии, а размещение в строках и столбцах контролируется директивами CSS (* Например, 1003 *).

Примером создания сетки из 4 столбцов и 2 строк может быть:

<div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

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

Используя в качестве примера шаблон Vue, вышеприведенное можно динамически визуализировать следующим образом:

<div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;'>
  <div v-for='item in items>
    <div>{{item.a}}</div>
    <div>{{item.b}}</div>
    <div>{{item.c}}</div>
    <div>{{item.d}}</div>
  </div>
</div>

... но это будет отрисовывать 4 блока каждого элемента в строке (я бы хотел, чтобы item.a ... item.d составлял элементы строки, а каждый item представлял строку).

Как можно было бы достичь этого? или это вообще невозможно с языком шаблонов?

Answer 1

Чтобы избежать создания элемента контейнера на одну итерацию, используйте <template> с v-for (вместо <div>):

new Vue({
  el: '#app',
  data() {
    return {
      items: [
        { a: 1, b: 2, c: 3, d: 4 },
        { a: 2, b: 3, c: 4, d: 5 },
        { a: 3, b: 4, c: 5, d: 6 },
        { a: 4, b: 5, c: 6, d: 7 },
      ]
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>

<div id="app">
  <div style='display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;'>
    <template v-for='item in items'>
      <div>{{item.a}}</div>
      <div>{{item.b}}</div>
      <div>{{item.c}}</div>
      <div>{{item.d}}</div>
    </template>
  </div>
</div>