Subgrid in Action

[00:00:00]
>> If we go back to our pictures of all of our planets and moons here and the work that we were doing earlier today. I'm gonna open this up, I think I, no, I did not kill the media queries yet. Okay, so this is one of the ones where we wanted to try to get things to align, and it's particularly noticeable when we get here to 700 and then 500 pixels, where the alignment issues become really noticeable.

[00:00:32]
So if I make my screen like, I've got it like 525 pixels wide here, you really see what's going on with these cards, okay? And here we have cards that are basically the same kinds of height. So at 500 pixels here with this example that we were doing earlier today, we have the following going on.

[00:00:58]
We have our card container here, we have template columns that are 1fr and 1fr, that's giving us our two columns with each of the cards. To this I am going to add some rows, I'm gonna add three rows, grid-template-rows: repeat(3, 1fr;), Okay? And so all I've done so far is just call out that there's three rows here in the design, all right?

[00:01:33]
That doesn't do anything for us, that's just where we start, it doesn't do anything until we go here to our card itself. And now instead of displaying block, I'm gonna go back and have to display this as grid, in order for this to work. I'm going to say grid-template-rows, columns, sorry, grid-template-columns, 1fr, grid-template-rows: subgrid, okay, and then grid-row: span3.

[00:02:19]
All right, don't worry about the featured card, we're gonna look down here a little bit further. We've got our border, we've got our padding, we've got our border radius, and then I am going to add to this align-items-start. That's gonna put the headline up at the top of the card, and then I'm gonna have to override what came before.

[00:02:50]
So the reason why at 500 pixels we had set these cards to display: block was because we had a different layout with two columns when we were working on mobile. And that's why this looks so weird right now because this is pulling in those mobile definitions that we had in terms of the image on the left and the headline and the button on the right or the other way around.

[00:03:10]
And now what we need to do is get these to stack on top of each other. So we need to add those styles, and I am going to add .card h2 { grid-row: 1/2; grid-column: 1/2}. For my card image, I'm going to tell it to go to grid-row 2/3 grid-column, 1/2, there we go, looking much better.

[00:03:48]
And now when we don't have cards that have all radically different heights, that have similar kind of heights to them in terms of content, you can see how nicely sub-grid is doing here lining up those headlines and the images and the buttons underneath. See how well that's working, look so much cleaner than what we had before, much, much prettier, okay?

[00:04:13]
All right, our featured item here is still a mess, so we would need to fix this up, in order to get that working as well. So what are the solutions here for all of these featured styles? Remember that the order often matters in CSS in what overrides what.

[00:04:31]
We have our featured styles up here early in our media query, where before they were working just fine. But in fact, because our featured card has two classes on it, it has featured class and the card class on it, and those have equal levels of specificity. What's happening is that, we set things up working correctly here on the featured card and then we override that with the actual card display, and that's where our featured card is broken.

[00:04:59]
So the fix for this is to take our featured styles, cut them, and we're gonna scroll on down here and we are going to paste these just after that. And that did not work, wow, look at that, cool. Then the next thing we're gonna have to do is we're gonna have to change some of the numbers here.

[00:05:22]
So for my grid-row, we're gonna change this from 1/2 to 1/5, that's gonna help a lot. Our grid column is still 1/3, all the other things are all good, and then I'm gonna add to this .feature p:last-child {grid-row: 4/5; margin-top: 0}. So that's gonna move my paragraph into the correct position.

[00:05:57]
Okay, so my bottom cards, still looking great. My top card has got a lot of big gaps on it. And so the final thing that I'm going to do here to tighten some of this stuff up is up here on my card container for my grid rows. What I'm going to do is go to 0.2fr 1fr 0.5fr, and that's gonna tighten everything up nicely, especially up here on this top card.

[00:06:29]
It gives me a nice pretty little gap before my button down here at the bottom. And then the rest of these cards are all aligned really nicely and well. This is looking so much better than what it did before, isn't it? Really pretty, okay. The next thing we wanna do is test this by making it bigger, make sure we go to our next breakpoint.

[00:06:49]
Remember that the sub-grid is gonna carry over in our media queries to our later layouts. So these are actually all lined up and looking really great just by themselves, there's very few changes we need to make here. We'd already made the major change, which was to add the extra column as we go to the wider grid display, so there it is there on the page.

[00:07:12]
And when we go to our larger sizes here, we have a big problem here with the earth image. And the issue is that we have the feature and the card taking up the same number of rows, because remember before we had our features spanning over three rows and each card took up one row.

[00:07:35]
Now we have each card taking up three rows, so our feature needs to take up how many rows? If each card is taking up three rows and we want three of those cards, how many rows should the feature take up? 3 times 3 would be 9 rows. So what we would need to do here when we get to our 900 pixels?

[00:08:02]
Find it, there it is. When we get to our 900 pixels, what we're going to do here for our card is we're gonna add this code grid-row: span 1. [LAUGH] And that actually fixes all of our problems. Because we don't really have an issue here with all the layouts going on here.

[00:08:24]
These are actually working all pretty well, by changing all of our cards back to spanning only one row from three, then they'll snap back into the layout that we had originally. That's the only thing I added here, I just told the cards to span one column instead of spanning three, and then the layouts all work again.

[00:08:46]
Okay, so that was a really nice way to enhance this. This is a really great looking layout now, things look really wonderful. As we get it smaller, they continue to line up and look really, really pretty, your designer friends are so happy. Like, wow, this is really great, look at all that, okay.

[00:09:08]
And when we get to very small, everything is still looking good. It was looking good before, we actually didn't apply sub-grid to this dimension, this is exactly what we had coded earlier. And then sub-grid is taking over here for these later dimensions, okay?