Creating a robust grid system using subgrid

From the creator

Subgrid is so powerful, and to continue raising awareness of how great it is, here is yet another video exploring it, this time building out a robust grid system! 🔗 Links ⚠ The start and end code will only work in Firefox (at the time of publishing this) ✅ Starting code: https://codepen.io/kevinpowell/pen/MWoZKvM ✅ Finished code: https://codepen.io/kevinpowell/pen/eYRaXpm ✅ Introduction to subgrid: https://www.youtube.com/watch?v=tX06aPu1aIg&list=PL4-IK0AVhVjM4Kjqw_zN-Y3neCFXWPDJ2 ✅ Introduction to grid: https://www.youtube.com/watch?v=plRcoRqLriw&list=PL4-IK0AVhVjM41-Ezm5tmESVchNEi7aZU ✅ Custom properties: https://www.youtube.com/watch?v=PHO6TBq_auI&list=PL4-IK0AVhVjOT2KBB5TSbD77OmfHvtqUi ⌚ Timestamps 00:00 - Introduction 01:38 - Setting up the master grid 03:10 - Placing the children on the grid 04:19 - Creating the subgrids 05:02 - Fixing the subgrid layouts 06:57 - Creating a more robust master grid 09:30 - Improving the master grid with custom properties 11:06 - Getting things on our grid at larger screen sizes 19:48 - Custom sections with custom properties 24:14 - Breaking out of the "container" 28:44 - The hero area #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter Come hang out with me live every Monday on Twitch! 📺 https://www.twitch.tv/kevinpowellcss --- Help support my channel 👨‍🎓 Get a course: https://ww

Published 2021-10-19 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.