Mastering CSS Subgrid: Unlock Advanced Web Layouts

Join us on this livestream as we explore the power of CSS Subgrid! Discover how to enhance your web designs by sharing grid lines between parent and child grids. We’ll dive into practical examples and best practices that simplify even the most complex layouts.
-----------------------------------------------
// TIMESTAMPS
We'll add these after the stream is done
-----------------------------------------------
// RESOURCES FROM THE VIDEO
Webflow - finsweet.info/...
Finsweet.com - www.finsweet.com/
Finsweet merch store - finsweet.com/m...
Signup to Finsweet+ - finsweet.com/plus
Subscribe to Finsweet RUclips - www.youtube.co...
-----------------------------------------------
// ABOUT US
We’re Finsweet - a Webflow enterprise partner, badass product creator, and educational content powerhouse. We are taking Webflow to a new level and sharing everything with you along the way!
🙌 Join our community - finsweet.com/plus
🔥 Add superpowers to your Webflow website - finsweet.com/a...
🧰 Extend your Webflow workflow - finsweet.com/e...
🚀 Build clear, scalable & organized Webflow websites - www.finsweet.c...
👀 Check out products used at Finsweet - www.finsweet.c...
🛍️ Buy Finsweet merch - finsweet.com/m...
-----------------------------------------------
// SOCIAL
Podcast: anchor.fm/fins...
Twitter: / finsweet
Instagram: / finsweet
Facebook: / thatsfinsweet
Dribbble: dribbble.com/t...
Behance: www.behance.ne...
Webflow: webflow.com/te...
-----------------------------------------------
// TAGS
#webdesign #css #lowcode
-----------------------------------------------
Thanks for your support! 🤟

[@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

[@stinkleaf]

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

[@rolandaichhorn4146]

Great explained, thanks!