Streaming live at 10am (PST)

CSS grid - unequal columns problem


#1

Hi Webflowers,

I have problem with new CSS grid. I have already worked with it and love how it allows us to create better layouts but I came to the bug I don’t know how to fix.

I have simple 4 columns 1 row grid and I have no idea why the last column is wider comparing to others. The right column is bigger although element inside grid is completely the same as in other columns.

Please see the picture.

Unfortunately I cannot provide you with link to the website as client doesn’t approve it.

Hope to get it solved with you!

Best,
Michal


#2

Hey @Michal_Maciejewski, how are you doing?

So, that’s an intended behavior of the FR unit, it’s a Fraction of the remaining space. So it’s dependent on the content size. But you are not stuck with FR, you can use other units like percentages if you want to.

the example bellow shows the same 8 column grid using FR (top) and % (bottom).