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 "Mondrian Painting 2 Exercise Setup" 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:

A different, more complex Madrian painting is the basis of the exercise challenge here, and Jen walks through the starting point HTML and CSS to get you started.

Get Unlimited Access Now

Transcript from the "Mondrian Painting 2 Exercise Setup" Lesson

>> Jen Kramer: It's a pretty wild and wacky layout that we manage to come up with in an hour, from nothing. We are gonna move on here to chapter 10, which is a you-try-it, hooray. So in the you-try-it folder, if you take a look at the files that I have there.

[00:00:17] You will see that I've given you a different Mondrian painting, okay? This one's a little wilder and a little wackier than the one we just went through. I've given you some starting HTML, here we go, I've given you some starting CSS, all right? So what you're gonna need to do in order to put this together,

>> Jen Kramer: Let me go on ahead and open this in the browser.
>> Jen Kramer: Helps if I'm in the HTML, there we go.
>> Jen Kramer: Okay, so you've got the same kind of starting point that you had with the exercise we just did. So you're gonna take a similar kind of approach here.

[00:01:02] So number one, and you can write this down if you need to remember what the approach is. So number one, figure out how many columns and how many rows you have going on here inside of the painting, okay, figure that out.
>> Jen Kramer: And then number two, then you're going to go on ahead and set this up, set it up as a display grid on the appropriate element.

[00:01:24] And then you can start to lay out sort of the structure of the page, so thinking about what is spanning where, and so forth. Then number three, you'll probably need to have a tool like the Web Developer toolbar. Again, you can just Google for it, it'll come right up.

[00:01:42] And use one of these pixel-based rulers, so you can make some measurements. And determine what the sizes are here for these boxes, in terms of their widths and their heights. And then you should be able to determine those grid template rows and those grid template columns with those values, in order to achieve a layout like this.

[00:02:03] Can you image a web page that looked like this?
>> Jen Kramer: Pretty awesome? They don't look like Tetris pieces, okay, you can't quite do a Tetris piece here, they're still just four-sided boxes. But it's pretty amazing that we can achieve a layout like this, all right?