[Vuejs]-2D array Grid order in CSS

by

1👍

✅

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

👤Sumurai8

Leave a comment