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