CSS Grids and Flexbox for Responsive Web Design

CSS Grids and Flexbox for Responsive Web Design Mondrian Painting Exercise Setup

Topics:
Jen Kramer
Jen Kramer
Freelance Instructor

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 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:

The class asks a clarifying question on how grids are laid out in rows, and Jen sets up a short exercise where the second half of the HTML elements are laid out from the demo earlier.

Get Unlimited Access Now

Transcript from the "Mondrian Painting Exercise Setup" Lesson

[00:00:00]
>> Jen: So let's keep on typing in some numbers here and you go on ahead and figure out the values for d, e, f, and g. Go on ahead and type in those values for grid row and grid column for d, e, f, and g. Five minutes, go ahead and go.

[00:00:14]
>> Speaker 2: Quick question before we go.
>> Jen: Sure.
>> Speaker 2: Justin's asking, for laying out in rows, do we need to include the second number or can we just say grid row 1 and grid row 2?
>> Jen: It depends, so it depends so you can say simply grid row 1 here for, say, letter a because we want it to take up basically one unit here in the row.

[00:00:41] But if you're going to have it go multiple units then you definitely have to call out the second number. And, again, because I am interested in somebody being able to read this code later, I think it's valuable to go on ahead and put in both numbers. So that somebody would be able to understand that code at a later point in time.

[00:01:02]
>> Jen: And it doesn't hurt anything. Okay, so five minutes, go on ahead and take a look at the values for d, e, f, and g, the grid row and the grid column values for all of those. And then we'll go over the answers.