I am inserting items from list to grid.

When I am inserting 2 items with same grid-column it's inserted one after another (which is good). But if next item is Could fit at top of rows I would like to place it there.

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(7, 1fr);
}

.item1 {
  grid-column: 3 / 4;
  background-color: coral;
}

.item2 {
  grid-column: 5 / 5;
  background-color: red;
}

<div class="container">
  <div class='item1'>1</div>
  <div class='item1'>2</div>
  <div class='item2'>3</div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

https://jsfiddle.net/epr5atvw/

How can i move item 3 so it will be next to item 1? My list is sorted and i cannot change it.

CodePudding user response：

Use grid-auto-flow:column;

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-flow: column;
}

.item1 {
  grid-column: 3 / 4;
  background-color: coral;
}

.item2 {
  grid-column: 5 / 5;
  background-color: red;
}

<div class="container">
  <div class='item1'>1</div>
  <div class='item1'>2</div>
  <div class='item2'>3</div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>