Columns block like float element when . you choose grid for mobile

Design help General
1

Hello

I have a problem with columns.

When you create a column element with 6 elements for example
http://test-menu-drop.webflow.io/colonnes

If you choose to split in mobile landscape in multiple of 2 or 3 elements, the lines are not balanced

You can see in my example, with different content (and different heights), columns becomes like floatting elements and not right lines.

Why i can’t have a line 1 with column 1 and 2 and after a line 2 with column 3 and 4 and after line 3 with column 5 and 6 and all lines with min-height of the biggest element of each line

Is there any solution to have balanced lines with variable content without add fixed height to columns?

Thanks for your help

2

To help fix this, I would recommend not using the column feature and just use GRID. You wont have that issue and will be much happier with the outcome of your design.

3

Hello

Thanks Brandon for your answer but Grid is not really supported by common browsers.
I need a more standard solution :frowning:
Thnaks

4

Use FlexBox then. But GRID is available on Chrome, Safari, Edge, and Firefox.

5

You have right thanks i m gonna use flexbox
Grid are not supported by Ie and edge
I thought there was a solution just using the columns
Thanks

6

Alex, its TIME to stop worry about IE support altogether. You are looking at less than 1% of the population that still uses IE!

1 Like
7

@alex12 I agree with @QA_Brandon
You can still use an ifIE for the last Internet Explorer users and invite them to upgrade their browser.

1 Like