This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.

Check out a free preview of the full CSS Grids and Flexbox for Responsive Web Design course:
The "Code Demo: CSS Grid" Lesson is part of the full, CSS Grids and Flexbox for Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

This code demo shows how to create a Mondrian painting in CSS and HTML using CSS Grid. Jen starts this demo as the first part of an exercise, and she uses "display: grid", "grid-row" and "grid-column" to start placement of the HTML elements

Get Unlimited Access Now

Transcript from the "Code Demo: CSS Grid" Lesson

[00:00:00]
>> Jen Kramer: So we are gonna be working with some paintings by Piet Mondrian. And you may not be familiar with him. He's a Dutch painter. He painted these paintings around the 1930s. And in the background of these women here is an example of his painting. If you can imagine, those are red, yellow and blue blocks along with white blocks with the black borders.

[00:00:20] You've probably seen these patterns somewhere out there. And then, this is Yves Saint Laurent, the dress designer in the 60s, decided to make dresses based on the paintings. I just love this picture. So [LAUGH], we're gonna actually go ahead and recreate some of Mondrian's paintings using CSS grid, cuz why not, right?

[00:00:40] Okay, so I'm gonna do one of these with you and then you're gonna do one of these on your own. So going ahead and open up in chapter nine,
>> Jen Kramer: Chapter nine and going ahead and open up the begin folder. We're gonna open up index.html and painting.css. The painting is just in the wrong place.

[00:01:08] So, I think the painting is outside of the beginning and end folder, so you probably wanna either fix the path or drag it into that folder.
>> Jen Kramer: Flexbox, sorry. Okay grid, and we'll go to the mondrian-painting, and we'll go to put the painting into the begin folder.
>> Jen Kramer: And then if you were to open the HTML here into a browser, once you've moved that painting image.

[00:01:45] So people in the internet apologize or put the painting picture in the wrong place for the URL. Just go ahead and move it into the begin folder and that will get you started. So what we've got going on here is, we have Mondrian's painting here. And I have gone ahead and labeled each of these squares with a letter, okay, so that you have a sense of what we're trying to do.

[00:02:11] And you'll see that in our HTML, those letters correspond to these divs, also with letters, all right? So what we're gonna do is, we are gonna try to match these two things together. So I've given you a starting wrapper, 600 by 600 pixels, I've given you the background image here and the divs are in place.

[00:02:36] I've outlined them in blacks so that they show up a little bit better and given them a little bit of a pasty. So we have a background image with this divs on top of it, they're real picks so we can kind of see the painting behind the divs, so we can work on lining things up correctly.

[00:02:51] Makes sense? Okay, so here is the next thing that I'd like for you to do.
>> Jen Kramer: So what we're gonna do is we're gonna start with, very simply, let's just get these boxes sort of in the right shapes. And what I mean by that is, if we look at just a, b and c here in the painting.

[00:03:16] Let's see if we can get a and b stacked on top of each other with a big box of c next to it. Don't worry about the proportions at this point, okay. Don't worry about the a's being skinny and the c being fatter. Let's just get two boxes stacked on top of each other next to a larger box.

[00:03:33] All right, make sense? We're gonna code this together. So what do I need to do to get started here with this painting? What is the first thing that I should type in?
>> Speaker 2: Display grid.
>> Jen Kramer: Display grid, and where is that gonna go?
>> Speaker 3: The wrapper.
>> Jen Kramer: On the wrapper, exactly.

[00:03:56]
>> Jen Kramer: Display grid, always a good start.
>> Jen Kramer: And if you wanna have a grid-gap, just sort of as a placeholder, you can go ahead and do that for now, grid-gap. And just set it up for 10 pixels. That's not the right number ultimately, but just as a placeholder.

[00:04:16] Just go on ahead and put that in place, okay. So looking at this painting again, a, b, and c, what are the numbers that I'm gonna need to put in for grid rows and grid columns for a, b and c? So I'm gonna let you think about that for just a moment.

[00:04:39] And I'm gonna give you the hint that the values here are gonna be grid-row and grid-column.
>> Jen Kramer: We're gonna need those values for a, b and c.
>> Jen Kramer: And for all the other ones for that matter.
>> Jen Kramer: But now, we need to think about what the numbers are.

[00:05:04] So what is the best way to start with that, if we look at this? How many overall columns and rows do we have in this painting?
>> Speaker 4: Does it count three?
>> Jen Kramer: The black areas here are gonna wind up being the grid gap, so don't count them. What do you think?

[00:05:25]
>> Speaker 5: Is it three rows and three columns?
>> Jen Kramer: Three rows and three columns. So we have one row here, that's a, okay? We have one row here, that's b. We have a row here, it looks like a d but then, what happens over here on the side? f and g, right?

[00:05:45] So it's split. So this is actually like four rows, right? Four rows, okay? How many columns do we have?
>> Speaker 4: Three.
>> Jen Kramer: Three, right? So a b, d is one column, sort of c and e is the second column, and f, g with the c at the top of it that's the third column, make sense?

[00:06:05] Okay, so filing that way, what would our numbers be then to specify where a is here in this grid? What are the numbers that I would type in for the grid row and grid column for letter a?
>> Speaker 4: The 1/4 for the row, and then 1/3 for the column?

[00:06:31]
>> Jen Kramer: Okay, so you're saying 1/4 for the row and 1/3 for the column, okay? So where are you getting that from? So for the row, 1/4?
>> Speaker 4: I was just thinking we were starting the upper left hand corner, so it would be in the first column, and also in the first row.

[00:06:53]
>> Jen Kramer: Correct.
>> Speaker 4: We already know how many rows and columns we have,
>> Jen Kramer: Right.
>> Speaker 4: So that's where it is.
>> Jen Kramer: Okay, so a is actually gonna go from one, which is right here just over the top of a, right, to two which is here between a and b.

[00:07:09] Three is gonna be here between b and d, and four will be here after d, make sense? And then with the columns, one is over here on the side, two winds up being here between b and c. Three winds up here between e and the f, g pair.

[00:07:28] And then, four is over here on the outside. Make sense? Okay, so what would our numbers be then for letter a, for the column?
>> Speaker 2: One to two.
>> Jen Kramer: One slash two, right? 1/2 and then for the grid column, what would be here for a?
>> Speaker 2: Same.
>> Jen Kramer: The same, right?

[00:07:56] So 1/2, and 1/2, okay. How about letter b?
>> Speaker 4: Do the same column.
>> Jen Kramer: So same column, right? So it's still 1/2.
>> Jen Kramer: All right, but what about the row?
>> Speaker 4: 2/3?
>> Jen Kramer: 2/3, right? So 2 to 3, okay? 2/3.
>> Jen Kramer: Okay, good. All right, now how about letter c?

[00:08:40]
>> Jen Kramer: What about its column value?
>> Speaker 6: Justin in chat saying 2/4.
>> Jen Kramer: 2/4, good job Justin. So 2 to 3, 3 to 4. So 2/4 would be the column value.
>> Jen Kramer: Oops, 2/4. And the row for c?
>> Speaker 4: 1 to 3, 1/3.
>> Jen Kramer: So from 1 to 2, 2 to 3, right, so 1/3 for the row.

[00:09:18]
>> Jen Kramer: Okay, [COUGH] so if we just go on ahead and take a look at our layout so far, we get this.
>> Jen Kramer: Who's a little weirded out?
>> Jen Kramer: Nobody a little weirded out by that result?
>> Jen Kramer: Anyone have any idea what's going on here?
>> Speaker 5: I just have a question.

[00:09:44]
>> Jen Kramer: Sure.
>> Speaker 5: Why is c for the grid row, why isn't it 2/3 for the grid row?
>> Jen Kramer: For the grid row?
>> Speaker 5: Yeah.
>> Jen Kramer: Because it start here one.
>> Speaker 5: Okay.
>> Jen Kramer: It goes to two, two will be somewhere here, right?
>> Speaker 5: Okay.
>> Jen Kramer: And then from here, 2 to 3.

[00:10:03]
>> Speaker 5: Okay, all right.
>> Jen Kramer: Okay.
>> Speaker 5: Thank you.
>> Jen Kramer: Cool yep, okay so, here's what's going on here with grid. Grid is very, very smart and it tries to anticipate what you're trying to do, okay? So grid knows based on the numbers that you've typed in that there are three columns in existence here, okay?

[00:10:25] So it knows that, this is called the implicit grid. So it is very helpfully constructed three columns on this, all right? It knows that there are at least two rows in existence because we have a and b in those rows, okay? But grid also knows that we have boxes d, e, f and g, and we haven't said where those are going to be placed yet.

[00:10:52] So grid is going to be very smart and say, you must want three columns and you want some more rows. And I'm just gonna make more rows that are three columns each and put something in each one of those columns until I run out of stuff, okay? So that's called the implicit grid.

[00:11:13] By implying what we're looking for with our first three values here, grid is continuing to construct the layout going down the page, all right? So that's where those things are gonna be by default. That's probably not where we want them. We're going to need to get more explicit about where we want d, e and f to go.

[00:11:34] Make sense? Okay, and for those of you who are bothered by the fact that a, b and c don't line up perfectly, that's totally okay. The shape is good. We're gonna get to exactly how those are gonna line up perfectly, momentarily.