Line-Based CSS Grid Layout Demo

[00:00:00]
>> So, let's take a look at our first example. We're gonna look at a painting by Piet Mondrian and we are gonna code it with CSS grid. So Piet Mondrian was a painter in the 1930s, you are probably familiar with his work, it's very popular. Here's you've St. Laurent, who turned it into dresses in the 1960s, but it was originally a painting.

[00:00:22]
So let's take a look at that now. Now obviously laying out a painting is a pretty limited type of exercise we're just gonna work with big squares of color and lay them out here on this web page accordingly. And we're going to wind up using some absolute measures of measurement, we're gonna work with a lot of pixels in this particular design.

[00:00:44]
I find that students like this exercise is an introduction to grid because everything is very clear and concise and compact and we know exactly what it is that we're building. And, so this is a great way to start getting familiar with the thinking that goes into CSS grid.

[00:01:02]
Or HTML is very simple, we just have a series of divs here because we have absolutely no meaning in this document whatsoever, there's no need to use any type of more interesting HTML. So we have a div with a class of wrapper, inside of that we have seven divs and they have letters that are associated with them.

[00:01:22]
And that's pretty easy HTML to remember, so I'm just gonna make my CSS window here a little bit bigger, inside of our code pin, once again those are available from the course website. If you take a look at the Mondrian painting exercises there's a link to the code pen right from that page.

[00:01:40]
Inside of this you'll see that I've given you a little bit of starting code, here's our wrapper I set a width and a height on it because again this is a painting we wanna to look in a very specific kind of way. In the real world I would not recommend setting a width and a height necessarily on your grid definitely not a height, with maybe not.

[00:02:01]
And I've given this background image to use, so this is the painting that we are gonna be coding. And I've put in letters for all of the cells that we're gonna be working with, so you can see exactly where we want all of these boxes to wind up happening.

[00:02:17]
So, the little letters that you see on the top here in the rows, that's our code and then the bigger boxes that are behind us that is the painting. You see here I've given you a little bit of starting code in the divs, every div has got a border on it, a color of white and 50% opacity.

[00:02:36]
So that we can see both ourselves and the painting behind, along with sort of a basic font. So let's go ahead and get started with this. And as I told you, the syntax we wanna think about is grid row and grid column. We're gonna specify this for each one of these cells inside of this particular exercise, so let's start with letter a.

[00:02:59]
What is gonna be our grid row and our grid column values here for letter a? Well, probably the best place to start is to think about how many rows and how many columns we're gonna work with in the first place. So we look at the painting here, you'll see that, we have one row here with letter a, one row here with letter b.

[00:03:25]
And then down here at the bottom, we've actually got two more rows, one for letter f and one for letter g, so we have four rows. And then how many columns do we have, it looks like three columns going across. So three columns, four rows. So for letter a then, how many columns and how many rows is it gonna take up?

[00:03:47]
It's gonna occupy probably one column and it's gonna occupy one row. Which one, now we have to count. So from here, we start remember that our first line is just outside of the drawing here, so there's line number one. Line number two is gonna be this one here between a and c, line number three is gonna be way over here between e and f.

[00:04:12]
And line number four is all the way on the outside, likewise in the rows we have our first line up here before the painting starts that's line one. Line two is between a and b And line three is gonna be between b and d, line four is outside of the painting So for letter a what is our position here for this?

[00:04:39]
We're gonna have a grid row, of one slash two, right. We're gonna have it go from one to two. And we're gonna have our grid column going from one to two as well. And I forgot to do something, did anyone catch? I've started to declare what the children are gonna do without declaring what the parent is needs to do, have an eye.

[00:05:05]
Alright, so let's go back and put that in place here on this outside div on the wrapper itself. Let's go ahead and add to this display, Grid. Here we go. And we're just gonna leave it at that for the moment. We can specify a grid gap if you want, grid gap.

[00:05:29]
Oops sorry, gap I have to remember that the new syntax is just playing gaps so hopefully I won't make that mistake too many times. It's just playing gap, no longer grid gap and the values here can be 30 pixels 20 pixels. And so that'll give us some space both horizontally and vertically once we start to specify all of the rest of our values here.

[00:05:55]
Now we haven't told grid how many columns and how many rows we're ultimately gonna have. So grids doing the best it can with the information it has, which it's just gonna drop one cell basically all in a column just like this by default. Until we start specifying where all of our individual cells go, so it's totally right here with a it's going from row to row one to two.

[00:06:20]
Exactly as we'd expect and grid doesn't know that we have more columns in mind, so it stretched this all the way across the painting. Let's go to letter b here then, what are gonna be our values here for grid row and grid column?
>> 1/2,1/3.
>> 1/2 and 1/3, okay?

[00:06:45]
So, 1/2 for which one, the row or the column?
>> Row.
>> Row, 1/2 and the column would be 1/3.
>> There's a few people saying 2/3.
>> Okay, so look at take a look at what's happening here we set our grid row, look at a and b grid row is exactly the same and check out what's happening here in our display.

[00:07:12]
So, this is one of the really important grid properties that is not true of Flexbox, grid cells can occupy the same space. So here, based on what we've said in the chat, we have a and b occupying exactly the same row. And they are in fact occupying the same row, they are on top of each other.

[00:07:34]
This is a very cool effect we're gonna talk a lot more about it later, but it's not what we want here. So, what would be a better value than for grid row, okay,
>> 2/3.
>> 2/3 all right. 2/3, there we go. So yeah now that's gonna move this down a little bit more, okay and then how about the column.

[00:07:54]
So here we said 1/2 it's doing exactly what you'd expect, it's in our second row, but now it's pushing across two columns and c moved up here to the top. And that's actually what you would expect c is gonna try to occupy the space that b might have otherwise left behind, that is the way grid is gonna work.

[00:08:17]
So c pops on up here But that's not exactly the layout that we're looking for, so what would be a better value for grid column for letter b?
>> 2/3
>> 2/3 okay. So if we said 2/3 okay, so a is now here in the upper left but b is down here in the lower right.

[00:08:43]
That's the remember this is two and two three, we actually want b to show up over here, starting at line number one gonna line number two. So let's change that to 1/2.
>> All right, so we are back now to what grid thinks is a single column, and that's okay.

[00:09:03]
Because when we put in literacy, grid will know that we actually have more than one column working here. We have a and b in the same column but they are in different rows. All right, so here for letter c then, And a grid column, okay? So now we have letter c as you can see here, it is spanning across some particular area.

[00:09:29]
So it's definitely going from line one to line two, to line three that's our rows, .okay so our grid row here is gonna be 1/3 Nice, and then it automatically fills in the space that's over here, so now grid knows that we have two columns kind of. So it's going ahead and drawing that in in this particular space here, our grid column though maybe wanna take a suggestion as to what our numbers are for our grid column

[00:10:07]
>> 1 slash 2
>> 1 slash 2 for the column remember we start here here's line one for our column, here's line two we actually want it over here don't we any other suggestions?
>> 2/4.
>> 2/4, that's correct, because we're gonna from two, remember we're gonna have a line here it's this part down here between e and f, let's line to line three and then line four is outside of the painting.