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

⌚ Timestamps
00:00 - Introduction
00:33 - The problem with normal grid
02:44 - Getting the main grid ready for subgrid
04:15 - Adding subgrid
05:23 - Gap and subgrid
06:40 - Improving our main grid

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[fuzzypumpkin]

Ok, now I get why it has some advantages over just making each grid area a grid itself. You could do some more faffing with traditional grid to get the same effect, but this is probably clearer/better on more complex pages.

[ericmartin]

I love the excitement in your voice when it just works.

[justinnobles]

6:45
grid-template-columns: repeat(auto-fit minmax(6ch, 20ch)) 1fr;

[yiannis_p]

Been busting my head for weeks trying to do exactly this and i finally came across your video that solved all my issues! Thank you so much!

[LaurelRonning]

Stumbled across this video and it solved my problem perfectly! Thank you 🙏

[MrDenertog]

@kevin: you can make it work with repeat function like this `repeat(2, minmax(6ch, 20ch) 1fr)`
the length parameter is a space separated list (just like grid-auto-columns would work)

[icoz]

I use display: contents, to make the children of an element to follow grid of its parent.

[clevermissfox]

Which is the video that explores the “gotchas” with grid-template-rows: subgrid ?

[riddixdan]

oh god, if this would release, so much stuff would be so much easier. I don't understand what the browsers are waiting for.

[sharafmakahleh]

Great video
I suggest that you include the word css somewhere in the title/thumbnail, because most people work with css and don't even know it's a thing in css so they don't click the video

[kevincooper]

What is the css for zooming in and out unnecessarily?

[johnwayne]

Interesting!!!😅 Where to find the next part of subgrid?
BTW, nice vids kev!😁👍🤟😎

[codedjango]

When is subgrid gonna be integrated with other browsers apart from Firefox? any idea?

[drax]

I had a couple situations recently where I really wanted to use subgrid for some cards I was creating, I had to do some awkward workarounds instead. I really hope other browsers jump on board :(

[frankroos]

If this doesn't turn you on, you either haven't understood it, or you have never made a more complicated layout. Probably both.
...and this is just scratching the surface...
I'm gonna need a diving suit!

Learning grid just so you can use subgrid once it is supported? NO WAY! Grid is awesome, even without subgrid. If you don't know grid yet, GO LEARN NOW! Subgrid will be a lot of cream on what is already a pretty tasty strawberry.

[hussainfaizal]

this is awesome, but what about using flex
put a fixed width ( in %) for the image container so that everything stays in the same fixed width?

[progressisbeautiful]

Safari implementation is expected at the big Apple event 2028.

[web-atelier]

Hi Kevin, thanks for this video. I was wondering what to do when you want to define a specific size in the subgrid. For example, you always want an image to be 250px height ?

[davidricebowled]

I originally came to comment to say it's easy to repeat the `minmax(6ch, 20ch) 1fr` but that's been covered already. But I'm curious as to how we might persuade browsers other than Firefox to implement subgrid, is there a particular strategy that's recommended? Do we just email Sundar Pichai, or something?

[josvelema]

Nice, that works so good. I would like to see how you would achieve the same layout with grid alone, just to compare and ofcourse to know grid better.