Geek Answers Handbook

Balanced Chrome core filling

I have a series of inline-block divs displayed in 2 columns using CSS columns.

I want the columns to be balanced (for example, 5 elements on each side).

Without inline-block it works fine. However, sometimes it breaks in the middle of one of my elements. Adding inline-block fixes this problem, but the columns are no longer balanced in Chrome. It works great in Firefox.

According to this article ( https://css-tricks.com/guide-responsive-friendly-css-columns/#article-header-id-9 ) it should be balanced by default if I have not set the height. I have not set the height, but I suspect that the inline-block leads to the same condition.

The column-fill property is supposed to fix this, but is not supported by Chrome.

Is it possible to use polyfill or a workaround?

+6
source share
2 answers

I do not recommend using the built-in unit

I think you should try these alternatives.

And for a responsive website, consider using media query

0
source

Try using display: flex instead of display: inline-block . You don’t need to use anything else from Flex, but somehow it behaves the same as inline-block and works with column-fill: balance in Chrome and Firefox (in Chrome you may need to use break-inside: avoid ). This may not work for all cases, but I had a similar problem and it worked for me.

0
source

More articles:


All Articles