Mastering CSS Subgrid: Unlock Advanced Web Layouts

[@webbae]

What I found is that in design mode, Webflow creates a style attached to the grid id with minmax(75px, auto) even though on the UI it shows the rows as auto. Similar to the .wf-empty class which has padding right and bottom of 75px, it makes things selectable in designer mode. If you switch the preview mode, everything works as expected! As you ended up doing, we can manually override the grid-template-rows property with minmax(min-content, max-content). In my playground, I used CSS Custom properties to set grid-template-rows: auto !important. Then everything works as expected in designer!

[@olliemcmillan]

Ahhhh that's why we have default 75px padding on empty divs. Every day is a school day!

[@vipulkumar1725]

Amazing

[@rolandaichhorn4146]

Great explained, thanks!

[@stinkleaf]

Sounds like the old days of layouts with nested tables and spans.

[@davidschaer]

i now know less then before 😵‍💫