Making This Carousel By Animating CSS Grid Layouts And Using the :has() selector

Did you know you can animate CSS Grid Layouts? You sure can! And today I'm gonna show you how you can do this by recreating this great looking case carousel inspired by unfold.co. LINKS: Code & Live Playground — https://www.frontend.fyi/v/animating-... Unfold's version: https://unfold.co 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:22 – What we'll be building 00:50 – Take a look at starting point 02:00 – Putting the slides side by side 03:35 – Making the grid change when you hover a child 05:05 – Removing the grid gap, because it breaks the hover 06:05 – Animating the grid change 06:40 — Animating the button when a slide shows 09:33 — Adding focus support 10:52 — Outro #css #webdevelopment #frontend