CSS Grid Demos

[00:00:00]
>> Sarah Drasner: So okay, we have a section with tons and tons of divs, but so many divs that it's just a background of gray, and it's just a wash of gray, right? We've said display: grid on the whole thing, and we have these concepts of grid template columns and grid template rows.

[00:00:18]
So if I uncomment these lines with the grid template columns and grid template rows. What it will really do is it will, and I'm going to pop this open in a new window. We want the grid column gap and the row column gap. So that you can see the difference between each ones of these.

[00:00:38]
And really what it did was apply that grid column, the grid column and the grid template to the first thing it saw. So the first thing it saw, it was 1fr and the first thing it saw on the rose was 80 pixels. fr I'll explain in just a second, so let's talk about that 80 pixels.

[00:00:56]
So it was 80 pixels, and then it just laid out all of the other rows, and then we got this big clump of everything. This is our grid, this is what it looks like in the dev inspector. We've got all of these templates and all of these rows.

[00:01:12]
fr is really a fraction of a unit, so however big it is, it's one piece of that thing, right? So because this is 100 view width and 100 view height, this is gonna span all the way across, that's all it's gonna do. But luckily, and we could actually keep going, and I could say 1fr, 1fr.

[00:01:34]
I'm gonna say 1fr, 1fr, 1fr, then it splits three ways, right? But we could also do this shorthand, we don't have to write it out all like that. We could say, repeat 5, and then stick the 1fr in there.
>> Sarah Drasner: I'm gonna move that over, and then you can see that it starts laying them out and it's decided that it's just gonna use up all of the space.

[00:02:06]
So you can see how that's nicely responsive, pretty nicely responsive out of the gate. I'm actually gonna do, For,
>> Sarah Drasner: But we still have that 80 pixels, right? If I wanted to I could say 80 pixels, 1fr, 80 pixels.
>> Sarah Drasner: And then what I get is 80 pixels at the top, 80 pixels at the bottom, and then whatever space is left, so whatever I've got left over here.

[00:02:36]
But really probably what I wanna do is do the same repeat thing.
>> Sarah Drasner: And then if I pop it open here, we've got a grid, right? So that's not that much code to get a whole grid that I can start laying things out on, right? We've got display grid, we're saying, that section is the width, the whole span of whatever the viewport is, and then the entire height.

[00:03:02]
And then I'm just repeating those fraction units all the way across, and I'm adding some gaps, so I can see them. I don't need to have the gaps, that grade would still be there, it would be harder for us to see right off the bat, but if I open up the dev tools and looked at it, it still has all of the.

[00:03:20]
Those are still in existence they just don't have the columns, so you can't see them, right? Yep.
>> Speaker 2: So why was the bottom-right blank when you had five columns?
>> Sarah Drasner: Because I don't have as many divs as that. So I could remove a bunch of divs here and those divs have the background of gray.

[00:03:38]
That's how that's being colored there. So it would still make the whole grid for me, it just wouldn't fill it with all of the divs, yeah, great question. Okay, we've got a bunch of different divs and a bunch of different items inside of the div. So let's uncomment this.

[00:03:55]
At first we'll,
>> Sarah Drasner: It's pretty much the same thing as what you saw before, except that these divs are smaller than the grid space. Before the divs were just expanding to fill that grid space, but these divs are not. These divs have an implicit width of 100 pixels.

[00:04:18]
>> Sarah Drasner: So stuff is inside these grid pieces, and they're each starting from over here. And the default is that they'll just move over to the side there. And if I go back and I say, center, then they move inside of that piece, right? So if you saw this without seeing the grid, it might not be clear where that grid is.

[00:04:48]
You'd be like, I don't understand, it seems like there's less pieces or, how did it get pushed over to the side like that? But that's another thing Grid allows you to do is actually say, just like Flexbox allows you to justify items and align content and things like that.

[00:05:05]
Its allowing me to say, whatever, however big that div is inside of that cell, let's just stick it in the middle. And you could also have it justified to the end and go to the other side as well and you could do these for each one as well.