Streaming live at 10am (PST)

CSS grid doesn't work with more than 3 elements

Hi everyone !

I just started to learn building websites with webflow, and I’m block with css grid.

I have a basic grid of 4 column, which take all the width. When I put the 4th div in the last column, there is a big space on the right. I can’t explain why.

With 3 divs, placed into the 3 first columns :

When I add a 4th columns, the css grid becomes :

Everything go back to normal when I add another column :

Thanks for helping me !

Here is my site Read-Only:
(how to share your site Read-Only link)

Hi @fabienDM and welcome. I can’t recreate your issue as for me everything works as expected

Hi Stan, Is it a way to reset everything ? Maybe it’s something inherited.
I already tried on a fresh new page.

Arf, this is the same even with a new project.

4 div

Everything goes back to normal, when I remove the 4th div


EDIT : I can’t reproduce this bug on safari. However I am on the last chrome version. Any idea ?

This is image from your link and all seem to work in Safari or Chrome


Can you try on this link please ?

Because I have that :

Hum, is it the same link ? Because on my picture you can see 4 div. Here you just have 3.

Yes as you said that you have problem with 3 divs. 3 or 4 still works for me without any shrinking problem.

but here we go with 4

Ok, so bad that you can’t reproduce :confused:

Thanks anyway !

You can try to start new project and delete this as there can be something what you have setup accidentally, but I really doesn’t have a clue as all is working for me.

Me neither, it works well on my safari. I’m gonna investigate more. Thx !

It was a zoom problem :sweat_smile: