Is it possible to make divs of varying height wrap and vertically align top to bottom with CSS?

Asked Aug 29 '15 at 06:40

Active Aug 29 '15 at 06:40

Viewed 34 times

The divs wrap in the image below, but the 5th item won't break the horizontal of the bottom of 1st item to align with the bottom of the 2nd, leaving an unnecessary space.

Is there any way to get around this without having to manually break the page into a set number of columns?

Thanks!

asked Aug 29 '15 at 06:40

Laser

5,085
4
34
48

Ehm, what are you doing exactly to get this result? – Mr Lister Aug 29 '15 at 06:50
It's just `display: flex;` and `flex-wrap: wrap;` – Laser Aug 29 '15 at 06:54
The answer is **no**. – connexo Aug 29 '15 at 06:56
@connexo Any suggested workarounds? Or is set columns with potential javascript adjustment of number of columns based on screen-size the most viable? – Laser Aug 29 '15 at 06:58
You can base the number of *CSS columns* on media queries. The downside is that it requires reordering the divs. – connexo Aug 29 '15 at 06:59
Cool, thanks. So I guess I could write some js to do that? Google+ seems to do something like that? – Laser Aug 29 '15 at 07:02
@Laser Check this fiddle :http://jsfiddle.net/gabrieleromanato/tQANc/ – CodeRomeos Aug 29 '15 at 07:24
@CodeRomeos Thanks for the suggestion :) I think that's a manual implementation though, which requires setting both columns and heights–which doesn't help for automatically adjusting columns to screen size and adding content dynamically. – Laser Aug 29 '15 at 08:44
1

You can use the Masonry JS library to get the desired result. – Kevin Hufnagl Aug 29 '15 at 11:25
@KevinHufnagl thanks, that's what I was looking for :) – Laser Aug 30 '15 at 03:37

Is it possible to make divs of varying height wrap and vertically align top to bottom with CSS?

0 Answers0