1

I'm trying to create a simple masonry hoping to avoid using libraries. I'm trying to get elements to stack while also avoiding the maximum height in previous rows.

You'll see from the code that div #3 won't stack below div #1.

Is there a way to do this without having to use masonry library?

I'm working on a wordpress project, and originally normal rows were fine, which I achieved using inline block. But now we want a masonry where each content (image) has different height. I played around with flexbox too, but encountered the same height issue. Then I tried using 'column-count' but the ordering is vertical..

So kind of running out of ideas. Thanks in advance!

.container {
  width: 100%;
}

.item {
  border: 1px solid black;
  float: left;
  height: 50px;
  width: 33%;
}

.item:nth-child(1) {
  height: 20px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • with a row direction flow you have no chance to do this ... your only way is to have a column direction or use masonry – Temani Afif Jul 13 '18 at 12:47
  • is this any use (ツ)? https://medium.com/@andybarefoot/a-masonry-style-layout-using-css-grid-8c663d355ebb – user115014 Jul 13 '18 at 12:51
  • is grid safe to use yet? i havent considered it but i thought it wasnt really safe yet? –  Jul 13 '18 at 13:34
  • @giantqtipz `is grid safe to use yet? ` if you don't care about IE then you can use it. [See the chart](https://caniuse.com/#feat=css-grid) – Hyyan Abo Fakher Jul 13 '18 at 14:02

0 Answers0