Subgrid

[00:00:00]
>> We are here in chapter 9. This is some of the latest, most cutting edge parts of CSS. And we encountered a problem earlier in this course as we were laying out some of our webpages and we wound up making something that looked like this. So we had some titles that we're wrapping, we had images that we're doing strange things, nothing really quite lined up.

[00:00:23]
Our cards are just totally fine, they were coded in the right way, but because we have different numbers of words, we wind up with some of these wrapping kinds of issues. To this point in time, there has been no way for us to fix those particular problems. We could try fixing those cards by using some kind of fixed height for all of those items, for a fixed height, for our headline, a fixed height for our image, and a fixed height for our button.

[00:00:49]
But if you've been around web development long enough, you know that fixed heights are generally a really bad idea. You never know how many words somebody is going to want to put in in that particular space. So, generally speaking, fixed heights are something you wanna avoid. So how on earth do we fix this problem?

[00:01:05]
Well, the answer is a thing called subgrid. And what subgrid is going to do, is you remember the way these cards were put together. We had actually two grid systems that were going on. We had one grid system that was laying out each card, and we had one grid system that laid the cards out on the page, right?

[00:01:26]
So now what we're going to do is we're going to take our cards and we're going to ask the cards to look at the underlying grid that's controlling the page, thus subgrid. And if our card elements are in line with the grid underlying the page, then everything is going to line up perfectly.

[00:01:45]
That is the theory, okay? And if that makes your head explode, no worries. We'll go through a bunch of examples of this. So let's start here with the exploring sub grid activity. And if we take a look here at our code pen, you'll see that I have put together a series of cards.

[00:02:05]
One card has a picture in it. It's got a paragraph of text and a button. All of the other cards have different amounts of headline text, different amounts of card text, and a button associated with them. And if we take a look at the structure of these cards, we have a series of divs here.

[00:02:32]
So we have our container and then we have a series of cards inside of that. They have two classes each. Card is one of the classes and then a number is the other class, one, two, three, four and five. Inside each card, every card but the first one, we have a headline, a paragraph, and a button.

[00:02:52]
In the first card we have a headline, an image, a paragraph, and a button. That's what we've got going on. We'd like everything to line up and look pretty. It's not currently doing that. So what can we do to fix this problem? So, first of all, what we can do is, let's see if we can make our cards line up by using our card class.

[00:03:17]
And we would do something like display grid, grid-template-rows, or sorry, grid-template-columns, 1fr, and grid-template-rows, repeat, 3, 1fr. So here, we're doing what I just told you not to do. I am going to set up all of my cards to have three rows per template card, and they're each gonna be one fraction high.

[00:03:49]
So take a look at how that winds up making our page look. Not so hot? Even if we ignore the featured card for now. Which is definitely throwing things off, we can see that we've kind of got our headlines and then we've got a grapey huge gap because that's the fr in 1fr.

[00:04:13]
We've got some text, that long text is defining what 1fr is, and then we have our button that's the top of the next 1fr. So that's what's going on here. We actually do have three sections. 1fr is defined by the tallest section, which happens to be our paragraph.

[00:04:30]
And then we just have blank space if we don't have anything else to fill in. This is why setting heights for your rows is not gonna fix that particular problem. Just doesn't work. So instead, what we're going to do is work on our container. Let me get rid of that card display.

[00:04:51]
And let's take a look at our container. So here we have our display grid, we have our grid template columns. We've said we want four columns. With a min max of 200 to 1fr. And to this I'm going to add grid template rows, and I'm just gonna say repeat, 3, 1fr.

[00:05:18]
Okay, so we're gonna have three rows. And because this is on the container, each one of these Lorem ipsum guys here is going to be in one of those rows. And then we have an extra row down here on the bottom that has nothing in it, right? Because we don't have enough stuff to put in that third row.

[00:05:43]
Then I'm gonna update my cards, and I'm gonna say display grid, and I'm gonna say grid template columns 1fr. And then I'm going to say the magic words, grid template rows subgrid. And then grid row span 3. Okay, so what did I just do here? So what we've told each one of these cards to do then is to have one column refer to the rows that are used to lay out the web page rather than any rows that we declare here on the card.

[00:06:29]
Take a look at the structure of the web page itself, and then have each card span over three rows. And we've used span 3 here rather than the number notation because we don't really know where these cards are gonna wind up. But wherever they wind up wherever they start we want them to span over three rows.

[00:06:48]
So now we have some alignment here. So you can see that we have our headlines are all aligned. This happens to be the image plus the paragraphs, they're all aligned. Our read more buttons they're all aligned. Why this paragraph is here with this read more button? We didn't tell the paragraph where to go, and so they were both occupying the same space.

[00:07:08]
And then down here in our second row, we wind up with headlines that align, paragraphs that align, and buttons that align. Okay, so let's fix this first card so that it spans the right number of rows. So this first featured card here, we actually wanted it to span enough so that we can have the cards stacked on top of each other two at a time.

[00:07:36]
If each card takes up three rows, then that means that our featured card needs to go from number one to number seven. So let's put that style on in here. We're going to say, Card number one we, take a look here in our HTML, our very first card is card number one.

[00:08:04]
So I'm gonna say .1 and I'm gonna say grid-column, 1/3. We want it to take up half the screen, and grid-row, 1/7. So our featured item will now take up seven rows, And there's the other little cards here underneath. So it did in fact work, but we still have these gigantic gaps inside of these cards, so that's the next thing to fix.

[00:08:38]
So what's going on with that? Well, there's some ways we can tighten up the space because remember 1fr is being defined by the tallest member of whatever is here. And so one of the ways we can tighten up that space is by saying .card greater than sign star.

[00:08:57]
So what is the star mean in CSS? Everything, everything, okay? And what does the greater than sign mean?
>> Parent?
>> Yes, this is for all of the children of card, whatever those children are we're going to turn off their margin. And that's gonna tighten some things up here a little bit, okay?

[00:09:28]
Some help, not a whole lot. So now what we can do is play around with some of our heights on our container here. So right now I have three rows, each height is one fr. I'm gonna change that. And after a lot of thinking about it, if we said something like .2fr, 1fr, .1fr, we wind up tightening up our cards a little bit and they start looking better.

[00:10:00]
See that? Okay, so that's gonna make that middle paragraph a little bit shorter and tighten up the space between the headlines and the buttons. But everything is aligned, so that was our goal here on these cards. So does that kinda make sense? Okay, so to go back and take a look at this one more time and sort of review where we are.

[00:10:26]
What we did was, with our container, we set up our rows to have a little bit of height associated with them for those template rows. We are having our cards latch on to those rows and span over them such that now things will line across the cards. That's pretty much what's going on.

[00:10:50]
>> Is there a reason why there's two class selectors for one?
>> A great question.
>> Yeah, I was just one of them myself.
>> Thank you, probably because I was not paying attention and that first one should not be there, should just be the second one. Thank you for pointing that out, awesome.

[00:11:15]
Okay, so we definitely still have some spacing issues that are going on here. When in doubt what do we do? We go to our dev tools. So, let's take a look at this in dev tools. And I'm going to put this into full page view, and I'm going to take a look at this in dev tools.

[00:11:42]
Okay, so here's our container. Woo, look at that. There's our grid. And there's our subgrid. Now, what's causing all of those big spaces? Can you see it?
>> All the text from our future.
>> The text from the feature definitely causing a big gap here, yeah. But what about up here?

[00:12:16]
What's causing the big spaces up here?
>> There's one header that has two lines.
>> Right, yeah, we definitely want those to align. But look at where these gaps are. Remember the gaps are the shaded parts here. See how the gaps are really pushing things apart? So if we scroll down a little bit more, some of the gaps here are causing a lot of the gaps that we see on the page.

[00:12:46]
So this might be a case where what we wanna do, Is, Here inside of our CSS I'm gonna change my container gap, From 2 rem and I'm gonna change my card gap to 1 rem. And that will again, help to tighten things up a little bit more and so forth.

[00:13:26]
Why are my top cards so much longer than my bottom cards? Anyone have a suggestion on that? Why are my top cards so much taller than my bottom cards?
>> Because of that text on the first one.
>> Yeah, cuz the image here is setting the height of our text for these two cards.

[00:13:51]
And then this paragraph is setting the height for our read more buttons here. That's what's going on. So these cards on top wind up being much taller, and these cards down here that that don't have any of those constraints, they are much shorter. So there are some compromises that we are making here with subgrid.

[00:14:11]
Make sense? Kind of sort of? All right, so this is just an initial demo here with subgrid on this sort of artificial example here of what's going on. Let's try applying this now to our actual work that we were doing earlier today.