Sizing Rows & Columns

[00:00:00]
>> All right. So what we have now then is the shape that we're looking for. Now we can start to think about exactly how wide do we want these columns, and how tall do we want these rows. And the best way to go about doing this is to go get in there with some kind of pixel based ruler.

[00:00:19]
And go measure the dimensions of all of these squares. It is really tedious and I'm very happy to tell you, you do not have to do that I have done that work for you. So, now we'll go back and add that information that's going to describe exactly how big our and wide our columns are, and how tall our rows are.

[00:00:40]
And then the syntax that we use to do that, it's going to go up here on our wrapper. So on the grid container on the parent, it's gonna go right after we have our display grid, we have our gap. And we can now add to this, how many columns are we gonna have?

[00:00:58]
This is grid hyphen template. Hyphen columns. So, we're telling grid exactly how many columns, that we're going to have here. Usually when people write this type of code, they specify this first. I wanted to put the emphasis on the numbers first. So, we did that, now we're coming back and entering how many columns we have here.

[00:01:19]
So as my measurements have deduced. And I've done this in pixels because we want these to match up as closely as possible to the painting. These numbers are 124 pixels, 376 pixels, and 42 pixels. Two pixels. So you can just using this grid template columns syntax, you can line up however many dimensions that you want.

[00:01:46]
For however many columns that you want and grid will do this particular type of layout. So you can have different widths for those columns, you can have different units of measure for these columns if you wanted. Here I've used all pixels, but I could have mixed it up, I could have done some rems, I could have done some percent's, I could have done ems and there's a couple of other units we'll talk about later.

[00:02:09]
So that gets us a little bit closer in terms of our rows in such or in terms of our columns and such, so now we can do the same thing with our rows grid hyphen template hyphen rows and the numbers here would be 170 pixels. 210 pixels, 61 pixels, and 61 pixels.

[00:02:34]
The line up here isn't exactly perfect. Remember that this started as a painting done by a human, not by a robot. And so Mondrian has things just slightly off. But we get pretty close to the painting layout here. So, as you see now we have all of our cells more or less on top of each other.

[00:02:56]
You'll do notice that we have a bit of a gap over here to the side of literacy, and that is because that is the way gaps work. So, we've got gaps all around just like that. And now we can start to fill in these cells with the appropriate colors.

[00:03:14]
So the easiest way to do this, is the following here right again on the wrapper I'm gonna set a background color of black which will make it very hard to see what we're doing exactly, but that will wind up filling in the grid gap area, with the black lines in between.

[00:03:36]
And then Now what we need to do is the following. Here on our div, we can get rid of this opacity part of this. So that makes things pop out quite a bit more. And then all we need to do is assign our various colors. So here and letter C which is the big red box, our background color.

[00:04:06]
Using an eyedropper tool, I determine the exact state of red. This is de 271d, so that'll give us a big red box, yes.
>> The gap automatically adds to all sides or all after the first, I don't see a gap on the far left.
>> Yes. All after the first, exactly as you see here.

[00:04:26]
Yep. And then here for letter d, we have a background color Of 015 CA zero. If you want of course you can just use the red blue and yellow. That's okay too. And then down here in letter g we have a background color of e, c d, b, 6b, that is the shade of yellow.

[00:05:02]
And then the last little bit of weirdness that you see here is from our background image. We can get rid of that. So that's up here on our wrapper around line number five, get rid of that background. And we have something approximating the painting here by Mondrian. All right, that is something you would not be able to do with flexbox, for sure.

[00:05:26]
Any questions on this basic basics of grid, and how this starts to work in terms of layout. Any questions?
>> Can that last gap be reset, like with margin and last child. I don't think you can use last child specifically with the gap but you could try, the gap gets set on the parent, so it's on the wrapper not on the individual cell.

[00:05:53]
So, I'm not sure that is necessarily going to work, good idea though.