Lay out blocks on multiple columns

Question

I think a screenshot and a little diagram will speak for themselves. This is what I have:

And this is the result I want:

So basically I want to say a div can be this big and if it's bigger then cut it and put the rest in the next raw. Any idea on how to do this simply?

Thank you

What effort have you made on your part? I mean did you think of something...may be just an approach? something that the community can add to? :) — sudo_dudo, Oct 24 '15 at 10:49

score 1 · Answer 1 · edited Oct 24 '15 at 11:05

1

Use the flexbox in the following way:

flex-flow: column wrap;

This will set the flex-flow into columns, not rows(as in your example), they will align on the cross-axis. Wrap will mean that the elements are allowed to wrap and take up space on a second column.

edited Oct 24 '15 at 11:05

Kristijan Iliev

4,901
10
28
47

answered Oct 24 '15 at 10:54

BroDev

582
1
4
14

Browser support in case someone wants to drop IE 9 http://caniuse.com/#search=flex-flow – Adam Azad Oct 24 '15 at 11:07

Michel · Answer 2 · 2015-10-24T11:50:01.453

According to the description and to the 'Spanish' column on your schema, you want a newspaper-like layout, with content that overflows on the next column.

CSS3 Column Module is useful for that, and is relatively well supported by browsers, providing you use it with prefixes.

In this fiddle, I have defined a lang block element. By setting a column-width to the langs, we allow the 'lang' to break on multiple columns.

CSS:

.lang {
    -webkit-column-width: 100px;
    -moz-column-width: 100px;
    column-width: 100px;
}

Lay out blocks on multiple columns

2 Answers2