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

We recently had almost same thing in a previous question here https://stackoverflow.com/questions/47370330/css-only-photo-grid-with-horizontal-fill/47370418#47370418 : you can have a look at it and i think if you want the mansory effect you don't have big choices — Temani Afif, Nov 19 '17 at 08:40

dippas · Accepted Answer · 2017-11-19T10:42:54.880

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>

Thank you. And if there are more than 1000 blocks? Will this solution work? — Dmitriy, Nov 19 '17 at 10:23
@Dmitriy I've simplified/improved the CSS so you can add as many blocks as you want to — dippas, Nov 19 '17 at 10:35

stalinrajindian · Answer 2 · 2017-11-19T09:52:33.590

0

Please try below style.

* {
  box-sizing: border-box;
}

.columns {
   -moz-column-width: 6em;
 -webkit-column-width: 6em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;
}

.columns-item {
  display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}

Check Output : https://jsfiddle.net/stalinrajindian/mqL83eq9/

edited Nov 19 '17 at 09:52

answered Nov 19 '17 at 09:34

stalinrajindian

1,363
1
14
22

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

2 Answers2