make divs of different heights fill vertical space on new line

Question

I'm trying to make a grid which should look something like this

but it renders as this

here is my HTML code

<div style="display: flex; flex-wrap: wrap">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

The item class has a static width: 33%.

I understand that doing something like this in JS is quite possible. But I am looking for a pure CSS solution.

Thanks

You can't make rows behave like columns...even with flexbox. If you want columns...use columns. — Paulie_D, Dec 22 '15 at 13:53
Related - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Dec 22 '15 at 13:53

score 2 · Answer 1 · answered Dec 22 '15 at 14:13

You need to add flex-direction and align-content properties to your wrapper element. and some fixed height.... Check the DEMO

CSS

.wrapper {
  height: 1400px;
  display: flex; 
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
}

.item {
  width:33%;
}

HTML

<div class="wrapper">
    <div class="item" style="height: 300px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

score 2 · Accepted Answer · answered Dec 22 '15 at 14:17

Your best option is to use Masonry but if you insist on CSS only solution then you should use columns Here is Demo

.wrapper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
  column-count: 3;
 -webkit-column-gap: 0; /* Chrome, Safari, Opera */
 -moz-column-gap: 0; /* Firefox */
  column-gap: 0;
  width: 100vw;
}

.wrapper div {
  display: inline-block;
  width: 100%;
  vertical-align: top;

}

<div class="wrapper">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
</div>

your CSS solution works perfectly. So why do you insist on Masonry? — darthNeophyte, Dec 22 '15 at 14:26
`:)` i don't insist on Masonry but i think its better solution since it's built for this exact purpose, also support on css columns is like this http://caniuse.com/#search=column. — Nenad Vracar, Dec 22 '15 at 14:30

score 0 · Answer 3 · answered Dec 22 '15 at 14:03

0

Adding a few more flex properties fixed it. I added:

flex-direction: column;
align-content: flex-start;

might not be exactly what you need but you should be able to adjust it to your needs

See the JS Fiddle

CSS Tricks guide to flex-box

answered Dec 22 '15 at 14:03

thebigtine

191
2
12

score -1 · Answer 4 · answered Dec 22 '15 at 14:05

<div style="display: flex; width: 100%;">
  <div style="display: flex; flex-direction: column; width: 33%;">
    <div class="item" style="height: 400px; background-color: #ddd"></div>
    <div class="item" style="height: 700px; background-color: #DC0F0F"></div>
  </div>
  <div style="display: flex; flex-direction: column; width: 33%;">
    <div class="item" style="height: 200px; background-color: #000"></div>
    <div class="item" style="height: 400px; background-color: #B429A2"></div>
    <div class="item" style="height: 400px; background-color: #29B436"></div>
  </div>
  <div style="display: flex; flex-direction: column; width: 33%;">
    <div class="item" style="height: 200px; background-color: #ececec"></div>
    <div class="item" style="height: 200px; background-color: #009EBA"></div>
    <div class="item" style="height: 200px; background-color: #74B2BD"></div>
    <div class="item" style="height: 200px; background-color: #694141"></div>
    <div class="item" style="height: 700px; background-color: #DCDA0F"></div>
  </div>
</div>

There is no explanation, And it doesn't answer the PO request :-) — Ronen Cypis, Dec 22 '15 at 14:14

make divs of different heights fill vertical space on new line

4 Answers4

See the JS Fiddle

Linked

Related