CODEWITHSUNDEEP
cssvue.js
sureshhewabi
sureshhewabi

Reputation: 91

2D array Grid order in CSS

I want to have buttons in following order:

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

How can I achieve this from CSS without changing the Vue code? I beleive I can achieve this by changing the order of the component in the grid. Any other suggestions are welcome.enter image description here

Vue code:

<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,columnIndex) in line">
        <button>{{cell}}</button>
      </div>
    </div>
  </div>
</div>

CSS code:

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

Data:

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

Upvotes: 0

Views: 998

Answers (1)

Sumurai8
Sumurai8

Reputation: 20745

Understand what you are putting into a grid. The easiest way to visualise that is by putting a border on .wrapper-inner and by putting a border on .wrapper-inner > *. You will see that you have 4 boxes horizontally next to each other.

So, how do you change that? The easiest way to do that is by recognising that your outer divs are rows, not columns, and that you need to put the items in the rows in columns. Or in other words, the grid should be one element deeper. In your case, you would end up with:

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

View and edit on codesandbox

Upvotes: 1

Related Questions