Subgrid & Container Queries change how we can create layouts
https://kevinpowell.co/courses?utm_ca... 👈 Looking to get better at CSS? I’ve got a range of courses, including several free ones!
Container queries and subgrid are now both supported in all evergreen browsers, which is super exciting, and as a bonus, they can work really well together!
In this video, I explore a classic subgrid example, and then step things up with the use of container queries, using that to add a subgrid to featured element across a few break points, and also looking at how container queries can break subgrid if we try to use them both on the same element.
🔗 Links
✅ The code from this video: https://codepen.io/kevinpowell/pen/Rw...
✅ More videos on Subgrid: • Subgrid
✅ Adam Argyle’s article on Subgrid: https://web.dev/articles/css-subgrid (I thought Adam wrote this, but I don’t see an author anymore so 🤷)
✅ More on grid auto-fit: • Easier layouts with these 3 Grid tips
⌚ Timestamps
00:00 - Introduction
00:48 - What we’re starting with
01:45 - Setting up the main grid
03:00 - Setting the stage for using subgrid
05:20 - Adding in subgrid for rows
08:06 - Using a container query to change the style of a featured card
12:55 - Adding subgrid columns to the featured card
16:50 - Container queries can break subgrid
#css #cssgrid #layout
--
Come hang out with other dev's in my Discord Community
💬 / discord
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!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - https://code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Watch video Subgrid & Container Queries change how we can create layouts online without registration, duration hours minute second in high quality. This video was added by user Kevin Powell 26 October 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 80,171 once and liked it 3.2 thousand people.