CSS inline-block clean folding

Question

Is there a way to make my block-elements behave like in this example:

Desired effect:

|----|----|
|1111|2222|
|1111|----|
|1111|3333|
|----|----|
|4444|
|----|

Actual result:

|----|----|
|1111|2222|
|1111|----|
|1111|
|----|----|
|3333|4444|
|----|----|

.wrapper {
  background-color:red;
  width:220px;
}

.block {
  background-color:blue;
  height:100px;
  width:100px;
  
  display:inline-block;
  vertical-align:top;
  margin:4px;
}

.long {
  height:200px;
}

<div class="wrapper">
  <div class="block long">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

That's a masonry layout - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css — Paulie_D, Oct 19 '16 at 14:39
@Paulie_D Not exactly, I would like number 4 to occupy the space where 5 is in the example. — Randy, Oct 19 '16 at 14:41
@BSMP I meant folding without leaving white-space except at the end of the list — Randy, Oct 19 '16 at 14:42

score 1 · Accepted Answer · answered Oct 19 '16 at 14:43

I think best option for this is to use masonry plugin.

$('.wrapper').masonry({
  columnWidth: 1,
  itemSelector: '.block'
});

.wrapper {
  background-color:red;
  width:220px;
}

.block {
  background-color:blue;
  height:100px;
  width: 100px;
  display: inline-block;
  margin:4px;
}

.long {
  height:180px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.1.1/dist/masonry.pkgd.min.js"></script>
<div class="wrapper">
  <div class="block long"></div><div class="block"></div><div class="block"></div><div class="block"></div>
</div>

score 0 · Answer 2 · answered Oct 19 '16 at 14:33

0

<div class="wrapper">
  <div>
    <div class="block long">

    </div>
    <div class="block">
    </div>
  </div>
  <div>
    <div class="block">
    </div>
    <div class="block">
    </div>
  </div>
</div>

this will have the desired effect with the same css

answered Oct 19 '16 at 14:33

Hugo St-Arnaud

159
5

This changes nothing I'm afraid. – Randy Oct 19 '16 at 14:35
load up the plunker and run it. you will see the elements align correctly https://plnkr.co/edit/S5OTUrAM5ESrF7sgGdQ2?p=info – Hugo St-Arnaud Oct 19 '16 at 14:36

score 0 · Answer 3 · answered Oct 19 '16 at 14:36

0

You can add to the .wrapper class,

column-count: 2;
column-gap: 0px;

.wrapper {
  background-color:red;
  width:220px;
  column-count: 2;
  column-gap: 0px;
}

.block {
  background-color:blue;
  height:100px;
  width:100px;
  
  display:inline-block;
  vertical-align:top;
  margin:4px;
}

.long {
  height:200px;
}

<div class="wrapper">
  <div class="block long">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

answered Oct 19 '16 at 14:36

Nick G

1,953
12
16

This works brilliant in the example, but unfortunately it blew up my entire layout in the actual project. I'm on debugging tour now ;) – Randy Oct 19 '16 at 14:40
This will not order the divs as required. – Paulie_D Oct 19 '16 at 14:41

score 0 · Answer 4 · answered Oct 19 '16 at 14:36

0

use float:left to block properties

.wrapper {
  background-color:red;
 display: inline-block;
width: 220px;
}

.block {
  background-color:blue;
  height:100px;
  width:100px;
float: left;
  
vertical-align:top;
  margin:4px;
}

.long {
  height:200px;
}

<div class="wrapper">
  <div class="block long">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
  <div class="block">
  </div>
</div>

answered Oct 19 '16 at 14:36

Jordi Flores

2,080
10
16

1

This works for my example, but then if you have more elements there will be white-space on the left instead of on the right ;) – Randy Oct 19 '16 at 14:38

CSS inline-block clean folding

4 Answers4