What are the most common and important purposes/uses of subgrid?
Hey, what are the most common and important purposes/uses of subgrid? Two that i know of are making content the same size to align buttons to the end of cards and organizing content into their respected tags e.g. elements that should be in a
main tag for a project but individually need to be in different columns don't need to be a direct child of the main grid. Ohter than that i'm not too sure of any others. I'd appreciate any insight, thanks in advance.2 Replies
There's a few examples in KPows videos https://youtu.be/R7aHcgIeATE?si=Q1PaHWjgigFQNoKe https://youtu.be/UwV4LtO0nHo?si=D-REjV5rrIDHL9-s https://youtu.be/dZHnAsYu2eU?si=ZZVBEugJ7ralpim1 https://youtu.be/IIQa9f0REtM?si=MIqf_GUyPralYejO
Kevin Powell
YouTube
You can't do this without subgrid
As part of #SubgridAwarenessMonth I've looked a lot at what you can do with grid-template-columns: subgrid; but I haven't talked about rows at all. With rows, you can actually do some really awesome things, but this is a "gotcha" to using them, but they also fail very gracefully as well 😊
🔗 Links
✅ The code: https://codepen.io/kevinpowell/pe...
Kevin Powell
YouTube
Creating a robust grid system using subgrid
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://co...
Kevin Powell
YouTube
Learn To Use CSS Subgrid in 8 Minutes
In my video series where I made this ski site, I ran into some issues when using CSS Grid. Despite using the same grid-template-columns in two places, the grid ended up behaving differently because the content was different.
Subgrid is the answer to this type of issue, and it works wonderfully well. Sadly it's not supported outside of Firefox y...
Kevin Powell
YouTube
Easy and more consistent layouts using subgrid
Grid is amazing, but it has it's limitations, many of which are solved with subgrid! Subgrid is only currently supported in Firefox, and this video is part of my Subgrid Awareness Month where I'm looking at raising the profile of subgrid and getting people excited by it!
🔗 Links
✅ New to grid? Start here: https://www.youtube.com/watch?v=v5KzBP...
Thank you, I’ll check them out