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)

⌚ Timestamps
00:00 - Introduction
01:38 - Setting up the master grid
03:10 - Placing the children on the grid
04:19 - Creating the subgrids
05:02 - Fixing the subgrid layouts
06:57 - Creating a more robust master grid
09:30 - Improving the master grid with custom properties
11:06 - Getting things on our grid at larger screen sizes
19:48 - Custom sections with custom properties
24:14 - Breaking out of the "container"
28:44 - The hero area



#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!

[miles]

Man, with your previous video subgrid hadn't really 'clicked' for me yet,
but now I undestand the power of it.
Excellent demonstration! 💯

[BasicallyWiz]

Me a Firefox user: "Aha! A superior feature for the superior browser!"
Me a Firefox user: *Makes page using subgrid*
My friends who don't use firefox: "Why does your page look so bad?"

[duncan_danger]

I have often struggled with margins and padding for creating a consistent "gutter" or resorted to a container div that I can't break out of. This solves all of that!

It's complex, yes. But it's so compact and creates an optional, cascading grid system. I love it!

[xOvernight]

even if you don't accept it I still believe you're the king of css

[moy]

Back in the days of bootstrap and other fixed-column-number libraries, I always dreamed of a way of re-using the main grid system. When subgrid was announced I was so excited, but then the hype it sort of vanished because of how long it took browsers to actually implement it, so long indeed that I actually forgot the use cases I had for it, lol.

Glad to see your content as always, Kevin!

[scnix]

As much as I love subgrids, I can't use them since my projects need to work on all browsers

[KelseyThornton]

When I first saw the main grid using columns of "1em, 1fr, 1em", I thought to myself "Why not simply use a container?".

After you asked that same question of yourself in the video, I had another think, and then realised that this grid with subgrid is way superior, especially when you want to have bands of colour stretching across the whole screen.
It also makes matching grids (between different sections) much easier, because they're the *same* grid.

How do things like grid areas work with subgrid? My first thought is that they 'break', but I'm willing to be proven wrong!

[dave]

“cSS iSn’t A pROgRAmmINg LaNGuAGe”

Kevin: “hold my beer”

[geesarabalasooriya]

Hey Kevin, I love your videos, could you please upload a video giving tips and tricks to making a responsive footer. I've been watching your videos for a while now and I've recommended your nav bar video to many of my IT classmates.

[huxnwebdev]

Your channel name should be (CSS MONSTER) 🔥

[oskrm]

Looks awesome, can't wait for major browsers to support it (and wait for safari)

[MaxWeir]

Mind blowing use case! And it’s so flexible. 🔥

[revillsimon]

Easily the best video I’ve seen from you in a long while. Thank you 🙏 😎

[ClarkeDesign]

So wish we had this 20 years ago when we started building website.

[domanickharper]

this is so nice, I love how it kind of acts like a whole page layout template with like 10 lines

[macbruker]

100+ unsaved changes! Living on the edge :D

[jupyterk]

Really informative!

I like how I start to master a style design pattern for myself and then I see stuff like this making my pattern look more "boilerplate-ish" to achieve the same thing XD. Really hoping this makes in other browsers so I can start adapting style patterns like these for making it more easier to write my styles :)

[Quiestre]

so how do you handle your website for all the people who use a chrome based browser?

subgrid is still not supported by chrome...

[Showbear]

i see the big advantage of having less dom elements and wrapping stuff

[felipedeabreuprazeres]

Now that is awesome content. o/
Thanks, Kevin!