Masonry effect - How can I change the order of the blocks?

Question

I use the columns (for effect masonry), with the order of location being - top down

1 3 5
2 4 6

* {
  box-sizing: border-box;
}

.columns {
  columns: 3;
}

.columns-item {
  background: #ccc;
  width: 100%;
  margin: 0 0 10px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.columns-item:nth-of-type(2n + 3) {
  height: 75px;
}

<div class="columns">
  <div class="columns-item">
    1
  </div>
  <div class="columns-item">
    2
  </div>
  <div class="columns-item">
    3
  </div>
  <div class="columns-item">
    4
  </div>
  <div class="columns-item">
    5
  </div>
  <div class="columns-item">
    6
  </div>
  <div class="columns-item">
    7
  </div>
  <div class="columns-item">
    8
  </div>
</div>

But I would like the order to be- left right

1 2 3
4 5 6

Answer 1

You can do this effect using CSS grid

.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(10px, 32.5px);
  grid-auto-flow: dense;
  grid-gap: 10px;
}

.columns-item {
  background: #ccc;
}

.columns-item:nth-of-type(2n+3) {
  background: red;
  grid-row-end: span 2
}

.columns-item:nth-of-type(6n+6) {
  grid-column: 3
}

.columns-item:nth-of-type(6n+5) {
  grid-column: 2
}

<div class="columns">
  <div class="columns-item">
    1
  </div>
  <div class="columns-item">
    2
  </div>
  <div class="columns-item">
    3
  </div>
  <div class="columns-item">
    4
  </div>
  <div class="columns-item">
    5
  </div>
  <div class="columns-item">
    6
  </div>
  <div class="columns-item">
    7
  </div>
  <div class="columns-item">
    8
  </div>
  <div class="columns-item">
    9
  </div>
  <div class="columns-item">
    10
  </div>
  <div class="columns-item">
    11
  </div>
  <div class="columns-item">
    12
  </div>
  <div class="columns-item">
    13
  </div>
  <div class="columns-item">
    14
  </div>
  <div class="columns-item">
    15
  </div>
</div>