Uneven column height when using CSS column-count

Question

I've got a page full of cards that I'd like to divide into two columns. So far so good, but in Firefox/Win, the heights of the two columns are way different — there's a big gap at the bottom of the first column while the other goes on and on...

Here's the relevant CSS for the enclosing div:

 column-count: 2;
 column-gap: 0.8em;                                                             
 column-fill: balance;

I'd be very grateful of any help sorting this out.

Please include full code (HTML and CSS) to allow us to reproduce the issue. — Hidden Hobbes, Jul 02 '18 at 08:30
https://stackoverflow.com/questions/45035224/css-columns-will-not-horizontally-align — Chris Kavanagh, Sep 29 '18 at 05:10
or. . .https://stackoverflow.com/questions/5314726/css-multi-column-layout-of-list-items-doesnt-align-properly-in-chrome — Chris Kavanagh, Sep 29 '18 at 05:10

score 0 · Answer 1 · answered Jul 02 '18 at 08:52

0

Change your css code:

column-count: 2;
 -webkit-column-count: 2;
 -moz-column-count: 2;
 column-gap: 0.8em; 
 -webkit-column-gap: 0.8em; 
 -moz-column-gap: 0.8em;

answered Jul 02 '18 at 08:52

Mina Hosseini Moghadam

1
2

Uneven column height when using CSS column-count

1 Answers1