Grid Layout with Span Notation Demo

[00:00:00]
>> Let's take a look at this Mondrian painting example one more time. This time, what I'd like to do is work on a different type of syntax, and show you how that works. So rather than going through all of the details, cuz this is the same example that we just coded in detail using numbers.

[00:00:18]
I'd like to just sort of slide by all of the niceties of background colors and grid gaps and all the rest of that. Let's just slide right on into looking at the new syntax for each one of the positions of these particular cells. I'd also like to talk about how grid is going to anticipate the layout of this web page in advance.

[00:00:40]
So you don't actually have to spell out the position of each one of these cells individually with each one of these declarations, the way we just did. So let's just take this one step further. Slightly different syntax, specifying less code, which we always love less code, and achieving the same type of layout.

[00:00:59]
So to get started with that right here on the wrapper, let's start with display:: grid, just like we had before. And we're going to have, of course, our grid-template-rows of 170 pixels, 210 pixels, 61 pixels, and 61 pixels, just like we had before. We're also gonna have our grid-template-columns of 124 pixels, 376 pixels, and 42 pixels, just like we had before.

[00:01:40]
So by specifying these in advance, you see already that grid is starting to try to arrange things here in space. So it knows that we have four rows, and it knows that we have three columns. So what I'll do right out of the box is, it'll just say, well, I've got seven different HTML elements that are my children, all right, here in the HTML.

[00:02:04]
If you take a look at all of those divs, those are all of the children. So we can simply just start putting one box per cell inside of our grid-based layout, which is really nice. And then of course to this, we can add our gap. And that'll be 30 pixels, 20 pixels, and that'll give us the little bit of space here in between.

[00:02:29]
So as you see here, we start off with this type of arrangement already. So as you can see right now, we don't even have to specify where letter a is going to be. It's already in the right spot. So we could actually start here with letter c. And this new syntax is going to look like this.

[00:02:48]
This is going to be grid-row of 1 / span 2. So that's the way this syntax works. So rather than before, when we said start at 1 and go to number 3, and we've specified very specifically which one of those, we're gonna say start at 1 and go across 2.

[00:03:10]
So it's sort of more of a relative type of layout type of thing. And so c will do that for us. And of course, we need to add to this grid-column of 2 / 2. So start at 2 and go across two columns. And so that just will just show up there on the page exactly like that.

[00:03:34]
So a and b now are already in the right places. We don't need to go through and spell them out exactly, their locations. Likewise, when we get on down here to something like letter d, okay, we've got d kind of in the right place, it's not tall enough.

[00:03:57]
e's not tall enough, and g needs to come over here to the side. So here for letter d, if we say our grid-row, we could simply say this, span 2, all right? So this is a second type of syntax, and let's just compare and contrast. So here with letter c, we said start at line number 1 and span 2.

[00:04:21]
So just figure out what the next two lines are and end at the second one. Here, for letter d, I've said, go across two lines. So there's no exact starting point, just span across two lines. Just figure out what they are and make it happen. And so that's what it's done here.

[00:04:41]
So that's a second way of writing this type of syntax. It's more relative, and we're gonna see that that becomes really helpful when we start working on a grid system, an actual grid system. And then, so for letter e, we can do something similar here, a grid-row span 2, okay?

[00:05:06]
So that sort of puts things in the right place. And now, all we need to do in order to achieve the rest of our layout is to put in our background colors, take out the opacity. And we pretty much got our painting done here in a lot less code, just by specifying a few of these particular items on the page.