Two columns grid with flat mixed list of items

user_1433658 0
Viewed 112

I'm trying to make two columns layout of flat list of random items where some should be on the left one under each other and others on the right.

So far i'm using css grid but i have an issue with "empty rows" because those cells do not know to "start from top".

If i add all of them grid-row-start: 1, they all just collapses above each other at the top.

I don't want to change structure of the container as i'd like to just shuffle the classes to move items. In theory i can add class like row-1, row-2 etc in JavaScript and use it to determine where the cell should start but I wonder if there is an cleaner way to approach this purely in css.

Demo: https://jsfiddle.net/mbynw4cL/1/

enter image description here

css-grid css html javascript
1 Answers

So what you want is to use the grid-auto-flow property:

.grid {
  width: 200px;
  border: 1px solid green;
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: dense;
}

.item {
  width: 30px;
  height: 30px;
  margin: 5px;
}

.item.left {
  grid-column-start: 1;
  justify-self: start;
  background: red;
}

.item.right {
  grid-column-start: 2;
  justify-self: end;
  background: blue;
}
<div class="grid">
  <div class="item left"></div>
  <div class="item left"></div>
  <div class="item right"></div>
  <div class="item right"></div>
  <div class="item left"></div>
</div>

This will "fill in" the gaps.

See https://css-tricks.com/snippets/css/complete-guide-grid/#article-header-id-25 for more on CSS grid.

user_14079990
Related