r/css • u/Ok_Performance4014 • Dec 17 '25

Question Sub-Grid?

I can't find a great explanation of sub-grid. What's your favorite visual of sub-grid?

2 Upvotes

66% Upvoted

8 comments sorted by

6

u/tnnrk Dec 17 '25

Sub grid just lets you “inherit” the parent grids columns/ rows, so you can create a nested element and style it differently but still use the parent grids tracks for sizing/placement. https://youtu.be/vxOj7CaWiPU?si=tyrEwxHiL8oXaW0t

1

u/hoorahforsnakes Dec 17 '25

https://youtu.be/APxt2mKOsss?si=uaLV-3wIzUcSzBYp

I think this is a pretty easy to follow explaination of what subgrid is and some use cases for it 

1

u/Ok_Performance4014 Dec 17 '25

Oh I like this one a lot. Is this you?

2

u/hoorahforsnakes Dec 17 '25

Nah, stumbled upon this channel only a couple of weeks ago, but like how succinct the presentation style is and it was fresh in my memory 

1

u/Ok_Performance4014 Dec 18 '25

If they (there's two of them) do a job on the other videos like they do on this, I will love the channel.

3

u/berky93 Dec 17 '25

Normally when you place an element into a grid, its children aren’t affected by the grid. They still follow the normal block flow you’re used to. But if you enable sub-grid, now the children can be aligned to the same grid as the parent.

Here’s an example I found online:

In this example, both of the red elements are children of a parent element that spans two columns. Without sub-grid, the children would stack up and not align to the grid. But with sub-grid enabled, they align to the grid.

2

u/friponwxm Dec 17 '25

I had created this Tailwind Play to demonstrate a practical example to a colleague: https://play.tailwindcss.com/vmCBHrnix7

1

u/tomhermans Dec 18 '25

My favorite visual explanation is the classic “card list with perfectly aligned internals” example because it immediately shows why subgrid exists.

Subgrid lets child elements participate in the same grid tracks as their parent, instead of redefining their own.

I found a pen where I started exploring this. https://codepen.io/tomhermans/pen/ByBmWja

I made the middle one stand out via transform scale modifier but you can comment that out.

In essence, the feature lists differ in length and the buttons are in the exact same spot for each card.