How to make column fill rows first in css3?

Question

I use (number of columns: 4) in css3 to put 9 images in 4 columns (which counts here: http://css-tricks.com/seamless-responsive-photo-grid/ )

but in my case 9 images just correspond to 3 columns (3 in each column) and the last column is empty! how can i make it fill the lines first?

+7

Msscliot Jul 24 '12 at 5:45

source share

1 answer

Florian Rivoal · Answer 1 · 2016-07-19T03:59:08+0000

column-fill: balance should do what you want, but this does not work in real browsers.

Maybe multicol is not suitable for you. Depending on what you are trying to do, maybe flexbox, or just an inline block can shorten it?

Maybe this is a little closer to what you were trying to do: http://jsbin.com/nobosu/edit?html,css,output

Without specifics, it’s a little difficult to know what to write out.