Grid System with CSS Grid

[00:00:00]
>> So the next thing I'd like to do is move on to chapter 10. And in chapter 10, we are going to code the same exact grid system that we coded with Flexbox, now, we're gonna code this with Grid. And we're gonna start by just doing the desktop version of our layout exactly as we did with Flexbox.

[00:00:22]
So if you take a look at your HTML, this is exactly the same example we had yesterday. We have a div with a class of wrapper going all the way around things here. All right, so I'm just gonna fold up these figures here just so you can see what's going on.

[00:00:41]
So notice that I have a class of wrapper around the whole thing and then I just have a series of figures here. Now, with Flexbox what we had to do was we had to put a div with a class of row around all of these groups of figures, but with Grid, we don't need to do that.

[00:00:57]
With grid, we can control all of this centrally with our CSS and we can do it very, very quickly. It's really a very nice system. So, just like we did with Flexbox, we're gonna have our first row is gonna have four separate boxes in it. Our second row will have two boxes spanning two columns.

[00:01:15]
Our third row has got the three plus one. Our fourth row is just one giant box. And our fifth row is the one to one configuration. So let's write some desktop styles for that. So we'll start with our wrapper, Because that's the parent to all of these figures.

[00:01:37]
And so this is where we place our display: grid. That's how it starts always. Now, what I would like to do is I'd like to have four columns on this page and I'd like them to all be the same width. Now, we could write out something like this grid-template-columns.

[00:01:59]
And we could say something like 25%, 25%, 25%, 25%. That would be absolutely legitimate and then as you see here, it displays very nicely on the web page. But there are more efficient ways to write this code. So let's go through other ways of writing this syntax. So with the usual caveat, as you were writing your CSS the best way to write it is the way that you understand it.

[00:02:26]
So you don't have to leverage all of the shortcuts and all of the additional syntax and all the rest of it. If you don't understand your own code, there are problems. So I'm showing you a whole bunch of different ways to write exactly the same thing. Here we're going to do something slightly different and something that you'll see a lot in other people's code.

[00:02:47]
For a Grid template columns, say repeat(4, and then this, 1fr). 1fr is a unique unit to Grid, you cannot use fr anywhere else in CSS, it's only for Grid and fr stands for fraction. So in other words we're telling Grid, I would like for you to divide the screen into four equal fractions.

[00:03:16]
So it figures out that that's about 25% of the width of the screen and it sets it up just like this. And rather than writing out those individually we're using this repeat notation. You could also write this as 1fr 1fr 1fr 1fr, that's perfectly legit also. And you may have reasons for doing that if this is more understandable to you.

[00:03:41]
But normally you'll see this written as repeat(4, in other words 4 of these, 1fr that's the width for each one of them. And then we're going to have our grid-template-rows, we can just set that to auto. However many rows you need, have fun. Just go ahead and set it up and make it happen.

[00:04:07]
That's what we're telling Grid to do here, so we don't have to be all that specific all the time. And we can also say our gap is 4%. So this is working off the similar kind of math that we had with Flexbox once again, where we had a 4% gap across all of our grid cells.

[00:04:26]
Well, we've got the same kind of thing going on here with a 4% gap. The difference here is that gap in Grid applies in two dimensions. So we've got a 4% gap in between the cells and a 4% gap between the rows. So not only between the columns, but between the rows as well.

[00:04:47]
So by default, it's going to put every one of these grid items into its own cell and line them all up really, really nicely with very, very little code, very efficient. So let's go through here and think about now what we wanna do with our second row. And I said we have two boxes, each of those is going to span two columns.

[00:05:14]
So first of all, based on what you know so far, what kind of syntax might we use to specify how we would say these two cells should be spanning two columns?
>> There is a question about the gap percentages are based on what property?
>> Gap is the property, 4% is the value.

[00:05:36]
Are you talking about 4% of what? 4% of the screen, well, 4% of the containing element, in our case, the wrapper is the container, the wrapper is occupying 100% of the width of the screen. So it winds up being effectively 4% of the viewport width in this particular case.

[00:05:55]
If your rapper was 50% of the screen, it would be 4% of that 50%.
>> Yeah, that's what they're asking.
>> Okay, cool. All right, so we could set up now our second row here in a very reusable way. So what I'm going to do here on my figure in my HTML is I'm gonna set this up with a class.

[00:06:20]
And I'm gonna call it span2, why? Because we're gonna span across two columns. And I'm gonna set that up here and my second figure as well, a class of span2, okay? And then we can write the corresponding CSS very easily, span2. What would I write here? grid-column: span 2; boom, that's it.

[00:06:52]
Really, really very straightforward. So in a desktop type of layout, I don't have to do any math. Remember all the crazy math we had to do with Flexbox and making sure that everything lined up correctly? We don't have to do any of that with Grid, Grid does it all for you, it's amazing.

[00:07:08]
And so we can now just take this style for span2 and let's set up a couple more. I'm just gonna paste that in a couple times. So I'm gonna set up a class of span3 and a class of span4, and I'm gonna tell it to span 3 and span 4, okay?

[00:07:28]
Get desktop based layout only. And now all I have to do is drop the classes in where I want them to appear. So here in my row 3 the first figure I'll say a class of span3. In row number 4 I have a class of span4. And in row number number 5, maybe my first item here would be a class of, span2.

[00:08:01]
So notice how much less code we have now in our grid system. How much less math we had to write, and how many less machinations we have to go through in order to set up this web page. It's very straight forward. The HTML is much more streamlined, we have really streamlined CSS.

[00:08:21]
We did it in just a handful of declarations here. And everything lines up perfectly, on the page we have exactly the layout that we're looking for, just like that.