Finally Understanding The Usefulness Of CSS Subgrid: In Just 10 Minutes

CSS Subgrid is a fairly new CSS feature, that is absolutely underused. It shines mainly when you try to align subitems of different children all on the same line. The reason why CSS subgrid is so underused I think, is because its use cases aren't that clear. That is why today we will be recreating the pricing table on Raycast's website, to show you what CSS Subgrid can add here. LINKS: Code & Live Playground — https://www.frontend.fyi/v/css-subgrid MORE? 📈 If you want more content like this, become a Frontend FYI PRO and get access to my current and all future courses for a one-time purchase: https://fe.fyi/pro 📺 If you want to see more videos like these, check out my website: https://fe.fyi/videos ✉️ Subscribe to my newsletter: https://fe.fyi/newsletter MY SOCIALS 🌍 My website – https://www.frontend.fyi 🐦 Twitter –   / jeroenreumkens   📸 Instagram –   / jeroenreumkens   💼 Linkedin –   / jeroenreumkens   COLLAB Want to work together on creating content? Feel free to reach out via jeroen [at] frontend.fyi WHO AM I? If you're new to this channel — Hey, my name is Jeroen. A frontend engineer with almost 15 years of professional experience, who in 2023 decided to stop teaching only his close collegeas to start teaching the whole world. What I teach some call Design Engineering, I like to call it the Craft of Frontend. TIMESTAMPS: 00:00 – Intro 00:20 – What we'll be building 00:43 – What is "broken" about Raycast's implementation 03:13 – Starting point 04:47 – Adding CSS Subgrid 09:19 – Making the center card larger 10:33 – Outro #css #webdevelopment #frontend #cssgrid