2D массив Порядок сетки в CSS

Question

Я хочу, чтобы кнопки располагались в следующем порядке:

 1  2  3  4
 5  6  7  8
 9 10 11 12
13 14 15 16

Как можно добиться этого с помощью CSS без изменения кода Vue? Я считаю, что я могу добиться этого, изменив порядок компонента в сетке. Любые другие предложения приветствуются.

Vue код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="chessboard wrapper-inner" >
    <div v-for="(line,lineIndex) in chessboard">
      <div v-for="(cell,coloumIndex) in line">
        <button>{{cell}}</button>
      </div>
    </div>
  </div>
</div>

CSS код:

.wrapper-inner{
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(8, auto);
  grid-template-rows: auto;
  grid-auto-flow: row;
  align-items: strech;
}

Данные :

new Vue({
  el: "#app",
  data: {
    chessboard: [
      [1,2,3,4],
      [5,6,7,8],
      [9,10,11,12],
      [13,14,15,16]
    ]
  }
});

Answer 1

Понять, что вы кладете в сетку. Самый простой способ визуализировать это - поставить границу на .wrapper-inner и поставить границу на .wrapper-inner > *. Вы увидите, что у вас есть 4 прямоугольника рядом друг с другом.

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

.wrapper-inner > * {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(8, auto);
  grid-template-rows: auto;
  grid-auto-flow: row;
  align-items: strech;
}

Просмотр и редактирование на codeandbox