Easy and more consistent layouts using subgrid

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

[@ericmartin8192]

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

[@jcespinoza]

Loved the Subgrid Awareness Month! 😄😄

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

[@LaurelRonning]

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

[@briancross4415]

Subgrid awareness month. I love it.

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

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

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

[@tomasvidal424]

So cool kevin! Keep it up!

[@Leyksnal]

Thanks Mr Powell

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

[@progressisbeautiful1541]

Safari implementation is expected at the big Apple event 2028.

[@MrJloa]

Tables redefined finally

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

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

[@johnwayne8059]

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

[@1981ilyha]

I love grid!!!

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

[@moreshwarp]

Thanks!

[@KevinPowell]

Thanks a lot!

[@kevincooper3834]

What is the css for zooming in and out unnecessarily?

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

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

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

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

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

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

[@xXxLYnXxXx]

very nice :) thx

[@carolmckay5152]

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

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

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

[@VOXGeneration-Freiamt]

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

[@dasten123]

interesting!

[@bs8028]

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

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

[@peacemekka]

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

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

[@jsuddsjr]

Firefox only. 😭

[@KevinPowell]

I know 😢

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

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

[@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. 😞

[@caitlinpillay3224]

cool shirt

[@SteveRaynerMakes]

is subgrid supported on all major browsers?

[@eotikurac]

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

[@OzoneGrif]

Only FireFox supports subgrid ?

[@yajirushik2871]

He did it lol

[@lenarnie2973]

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

[@scnix]

but subgrid is still unsupported by most browsers :(

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

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

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

[@vasekcz]

Ok

[@diegooliveira1083]

ok

[@zweisser]

dont see the difference

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