Streaming live at 10am (PST)

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


I have a problem with columns.

When you create a column element with 6 elements for example

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

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.


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

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

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

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

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

1 Like