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: • Creating a nice layout...
✅ Codepen - start: codepen.io/kevinpowell/pen/ZE...
✅ Codepen - end: codepen.io/kevinpowell/pen/Rw...
✅ MDN on subgrid: developer.mozilla.org/en-US/d...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@zachjensz]

Grandparent Grid

[@fuzzypumpkin7743]

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.

[@justinnobles3659]

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

[@eotikurac]

oh, yea, that makes so much sense...

[@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!

[@eotikurac]

i would bet you don't remember how the grid works from just glancing at the css. now imagine some other developer looking at it. css grid is a disaster.

[@jcespinoza]

Loved the Subgrid Awareness Month! 😄😄

[@tomasvidal424]

So cool kevin! Keep it up!

[@Leyksnal]

Thanks Mr Powell

[@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 ?

[@briancross4415]

Subgrid awareness month. I love it.

[@johnwayne8059]

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

[@MrDenertog]

subgrid!!!!! @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)

[@josvelema2362]

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.

[@KevinPowell]

I don't think it's possible to be honest... One of the reasons I wish we had subgrid

[@1981ilyha]

I love grid!!!

[@ico0z]

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

[@char2s476]

you just made me learn another awesome css feature!!!

[@moreshwarp]

Thanks!

[@KevinPowell]

Thanks a lot!

[@drax6094]

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 :(

[@sharafmakahleh4125]

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

[@riddixdan5572]

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

[@dv4able]

I think it's a challenge to add new tasks to render the page and keep it fast on most devices.

[@xXxLYnXxXx]

very nice :) thx

[@hussainfaizal8617]

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?

[@a.miroshin]

I've just though the same way

[@kevincooper3834]

What is the css for zooming in and out unnecessarily?

[@progressisbeautiful1541]

Safari implementation is expected at the big Apple event 2028.

[@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?

[@bs8028]

Did anyone try this with sass ? How it compile to other browsers ? Many we can use it like it’s already implemented:)??

[@peacemekka]

how does this work with `grid-template-areas` ? or is it not possible to do it with areas?

[@frankroos1167]

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.

[@dasten123]

interesting!

[@MS-gn4gl]

In the example you showed at 2:37 they do not behave the same - it's pretty obvious the left column is not behaving the same as the right column once it gets narrower. I'm assuming that's due to the subgrid being set at the column level? Is there anyway to counter that and ensure they're constantly the same?

[@adamadequate4596]

It's because one of the columns has a larger intrinsic size than the other (the longest unbroken word is longer on the left). This means not all 1fr columns will be the same in order to prevent the content overflowing. Outside of this, the columns on the left and right will be the same at all widths until you hit this lower limit. If you really really don't want this to happen you can use minmax(0, 1fr) instead of 1fr, but your content will overflow in that instance instead of becoming unbalanced. Source: Debugging CSS Grid: Part 2: What the Fr(action)?

[@VOXGeneration-Freiamt]

Is it working too width the grid-template-rows?

[@codedjango]

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

[@BasicallyWiz]

The reason Kevin is hosting this "Month of subgrid" is because no browsers plan to implement subgrid, other than Firefox, which has it already implemented.

[@sasca854]

They probably don't feel the need to implement it because grid is already fairly esoteric; subgrid probably wouldn't get used much until people become more familiar with grid in general.

[@kuldipkumar3363]

Can you please tell me how to stop layout breaking when we zoom in or zoom out the browser window please make a video on this topic

[@dave6012]

I know I’m not kevin, but in my experience having a good layout at all widths will prevent layout from breaking on zoom. Zooming has the same effect as width shrinking on layout. Also, use rem/em instead of px for all your sizes. Happy coding!

[@clevermissfox]

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

[@FanniTakacs-ez3dn]

This one for example: kzbin.info/www/bejne/iGjEeZadfsp0iqc

[@aram5642]

But we had this before, it was called 😂 But seriously, please do continue with subgrid! And use your Powell to make all browsers subgrid-savvy :)

[@fuzzypumpkin7743]

Nooooo no bringing tables back! :)

[@dave6012]

I HAVE THE POWELL!!!

[@filippotinnirello]

tables are independent like grids unless you fix the column width

[@MultiHowdoyoudo]

@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. They are waiting for Kevin to cover all of the advantages before releasing it

[@Stoney_Eagle]

Interesting... Instead of working inward with styling, subgrid works outward. Why is this only implemented in Firefox 😡 My main user base is on Chromium, Safari and Samsung. 😞

[@carolmckay5152]

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

[@jsuddsjr]

Firefox only. 😭

[@KevinPowell]

I know 😢

[@OzoneGrif]

Only FireFox supports subgrid ?

[@SteveRaynerMakes]

is subgrid supported on all major browsers?

[@eotikurac]

yes, but it's a terrible way to build layouts.

[@yajirushik2871]

He did it lol

[@udoheinz7845]

I am working as an Web Dev and I just can t use grid because we make webistes for big companys and there is still a big nuber of users using ie.... But in a recent project for a smaller company I used it and it works fantastic....

[@dave6012]

I work in web dev and we said fuck the IE users a long time ago.

[@udoheinz7845]

@@dave6012 I would also love to but sadly the data shows that quite some people use it...

[@dave6012]

@@udoheinz7845 that sucks man… I’m glad I work for a forward thinking company.

[@udoheinz7845]

@@dave6012 it all good. we joked about having a party when ie support ends in 2022

[@KevinPowell]

Google, Netflix, Facebook, Twitter, LinkedIn, AWS, and even Microsoft, among many other of the biggest sites on the internet today have already stopped bothering to keep supporting it... It's time to let it go 🙂

[@Atractiondj]

This is all great, but for example, I haven’t found any practical use for subgrids and container queries for a year now. I still think this is absolutely useless while we have Grid and Flex and if you know how they work then you will not have situations where you need these new options. But I do not deny that one day I will find an area where I cannot do without it.

[@caitlinpillay3224]

cool shirt

[@scnix]

but subgrid is still unsupported by most browsers :(

[@lenarnie2973]

so sad to see subgrid is still not supported by other browsers :/

[@Knards]

What the heck is 6ch, 20ch?

[@jcespinoza]

ch is a unit of measurement

[@gilsinhonunes]

Ch stands for character. One ch is the width of the character 0 (zero).

[@Knards]

@@gilsinhonunes Thank you. Never heard of them

[@abhim6380]

@@gilsinhonunes why does it exist

[@gilsinhonunes]

@@abhim6380 it’s for keeping lines with a good amount of characters so the legibility is good. For example, you can set a max-width of 65ch on all of your paragraphs, no matter what the font-size or font-family you use.

[@eotikurac]

so, basically grid is useless (yes, useless) without subgrid, and until recently it was not supported very well. this is what happens when people want to be too clever. i was perfectly comfortable with limitations of floats and display inline block but when flexbox came out, and later grid, i now don't know what layout is possible or not. i cannot tell my designer, hey this doesn't work anymore because the tools are becoming to complex.

[@studiosoftmorecambe6879]

Have I got this right, we have happily done this with divs for many years so the experts gave us the complication of grid which introduced resizing problems. To get over this they introduced subgrid to make grids behave like divs on their own do - CSS has lost the plot.

[@eotikurac]

you're absolutely right. i've been out of the loop for less than two years and i cannot understand any of the new website layouts. it's all cryptic and i would bet not even the people who built it can understand what's going on.

[@realist8774]

Pfff, this can be easily done with Hahaha

[@vasekcz]

Ok

[@diegooliveira1083]

ok

[@comradecid]

please please please make the bubble of your head smaller or get rid of it. i can't see the code because it's hidden by your face.

[@zweisser]

dont see the difference