1

Using flex

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.box {
  width: 46%;
  flex-grow: 1;  
}

gets the next picture: enter image description here

Using floating

.container {
  overflow: hidden;
}

.box {
  display: inline-block;
  float: left;
}

gets me the next picture: enter image description here

The task requires that there would be no vertical spaces between boxes (how it is in the first column with flexbox or in the second column with floating), so the boxes float to each other filling ALL available space. Boxes widths are the same, but boxes heights differ. Should be responsive, so the 2 columns get into one when viewport shrinks. Appreciate any help or hints.

UPDATE: I would like to explain why the solution here (question for which is marked as duplicate) doesn't work form me – in that question, items are about the same, they are pretty much homogeneous, so they can be approximately calculated how much items goes into which column. In my example, items can be of very different sizes, so if 2 (for example) columns created, it is not clear hot to put html layout, how many divs goes into which column, so, for example, 'header 1' box can be the same height as 2-5 together – and their height is dynamic.

olegzhermal
  • 799
  • 10
  • 26
  • So you're looking for a masonry (Pintrest) layout? If so, that's been requested many a time here on SO. – hungerstar May 24 '17 at 14:15
  • @hungerstar yeah, probably, I just haven't know that it's called masonry layout. Thanks for that hint. Going to search for it. – olegzhermal May 24 '17 at 14:22

1 Answers1

1

You can use column-width property (CSS columns), though you might have to check the browser support for that feature.

Here is the documentation.

Here is a fiddle for the same.

emptyjayy
  • 494
  • 4
  • 10
  • your fiddle and solution almost (!) worked form =) Except, that when vw is shrank that it can contain < 2 columns there is free space on the right side of the one column left, which I thought to resolve with 'flex-grow: 1' in flex solution... – olegzhermal May 24 '17 at 14:07