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 "Flexbox and CSS Grid Exercise 2 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:

In this exercise, Jen’s challenge is to use Flexbox in an ideal scenario - as an image gallery. Using the same image gallery built earlier in Flexbox, this exercise focuses on integrating that into a grid layout within the example pie website.

Get Unlimited Access Now

Transcript from the "Flexbox and CSS Grid Exercise 2 Setup" Lesson

[00:00:00]
>> Jen: So this is another you try it where you're gonna be working with something as your own. So I'm gonna get you started here with this and show you how this works. So we spent an entire day working with flexbox as a hack, right? That was that whole grid thing.

[00:00:13] But we did complete one exercise where we used flexbox as we should laying out an image gallery, right? So in this exercise we wanna combine yesterday's flexbox image gallery with the grid layout of today's webpage. So what I've given you here in your begin folder for chapter 17 is two things.

[00:00:31] One is yesterday's flex box gallery exercise, okay? So you've got,
>> Jen: The gallery all by itself okay, and that bit of HTML and CSS. And also you have a folder here for the pie and history page laid out as grid, which you can use the one if you just coded that up and you wanna use that, that's totally fine.

[00:00:57] Or you can use mine,
>> Jen: And mine looks like this, okay. So we're gonna put these two things together so that you wind up with a gallery page. I'll show you what that looks like as well.
>> Jen: So we built one of these yesterday in flexbox. This is the pie gallery now.

[00:01:23] The rest of the page is laid out using grid, but the these images in the middle are laid out using flexbox, all right? And you'll see here that they change their layout depending on the screen size, okay?