Grandparent Grid

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.

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

@eotikurac

5 ай бұрын

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

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

5 ай бұрын

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.

Loved the Subgrid Awareness Month! 😄😄

So cool kevin! Keep it up!

Subgrid awareness month. I love it.

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)

Thanks Mr Powell

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

2 жыл бұрын

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

I love grid!!!

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

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

Thanks!

@KevinPowell

2 жыл бұрын

Thanks a lot!

very nice :) thx

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 ?

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

Safari implementation is expected at the big Apple event 2028.

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

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

2 жыл бұрын

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

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

What is the css for zooming in and out unnecessarily?

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.

interesting!

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?

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

2 жыл бұрын

Nooooo no bringing tables back! :)

@dave6012

2 жыл бұрын

I HAVE THE POWELL!!!

@filippotinnirello

Жыл бұрын

tables are independent like grids unless you fix the column width

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

@BasicallyWiz

2 жыл бұрын

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.

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

2 жыл бұрын

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

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

@FanniTakacs-ez3dn

3 ай бұрын

This one for example: kzread.info/dash/bejne/hGuVqsWgecinhKg.html

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

@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

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

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.

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

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

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

2 жыл бұрын

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!

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

2 жыл бұрын

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

@udoheinz7845

2 жыл бұрын

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

@dave6012

2 жыл бұрын

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

@udoheinz7845

2 жыл бұрын

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

@KevinPowell

2 жыл бұрын

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 🙂

is subgrid supported on all major browsers?

@eotikurac

5 ай бұрын

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

He did it lol

Firefox only. 😭

@KevinPowell

2 жыл бұрын

I know 😢

Only FireFox supports subgrid ?

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

cool shirt

but subgrid is still unsupported by most browsers :(

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.

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

What the heck is 6ch, 20ch?

@jcespinoza

2 жыл бұрын

ch is a unit of measurement

@gilsinhonunes

2 жыл бұрын

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

@Knards

2 жыл бұрын

@@gilsinhonunes Thank you. Never heard of them

@abhim6380

2 жыл бұрын

@@gilsinhonunes why does it exist

@gilsinhonunes

2 жыл бұрын

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

Pfff, this can be easily done with Hahaha

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

5 ай бұрын

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.

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.

Ok

@diegooliveira1083

2 жыл бұрын

ok

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.

dont see the difference