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

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.

curiousmissfox•7/23/24, 5:11 AM

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

YouTubeKevin Powell

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...

YouTubeKevin Powell

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...

YouTubeKevin Powell

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...

YouTubeKevin Powell

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...

snxxwyyOP•7/23/24, 3:49 PM

Thank you, I’ll check them out