7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

7.2 Styling the Grid

In this lesson, you will use Flexbox to style your image grid. Here, you will be using the flex property to determine the size of each of your images.

Relevant Links

1 lesson, 00:39


2.Project 1: Flexbox Menu
2 lessons, 11:59

Basic Menu Styles

Styling the Flexbox Menu

3.Project 2: Complex Layouts
2 lessons, 12:16

Flexbox for Page Layout

Nested Flexible Boxes

4.Project 3: Banner With Centered Content
1 lesson, 07:25

Vertically and Horizontally Centered

5.Project 4: Ordered Content
1 lesson, 05:23

Changing the Order

6.Project 5: Image Grid
2 lessons, 10:03

Basic Styles

Using Flexbox to Finish the Layout

7.Project 6: Uneven Image Grids
2 lessons, 12:39

Basic Image Styles

Styling the Grid

8.Bonus Project 1: Flexbox Modal
2 lessons, 11:58

Building the Flexbox Modal

Flexbox Modal Functionality

9.Bonus Project 2: Flexbox Content Slider
1 lesson, 12:49

Building the Slider

1 lesson, 00:38

Final Thoughts

7.2 Styling the Grid

Hello and welcome back. In our last lesson, we finished setting up the images themselves or the divs that contain these background images. And now that we've done that, we're going to get started putting these in rows. So as we mentioned before, our first image row is gonna have three separate images in it, our second one will have two, etc. So we're actually gonna have multiple flex containers here. Our first flex container is gonna be this first image row, which contains these three images. So we're gonna to set up the image row class in our CSS as a flex container, we're gonna set the display to flex for that class. So before we get started make sure that you open up this particular starting code pen unless you've been following along with your own code and you've already gotten to this point. But you can find the URL for that just in case you haven't, in the course notes for this lesson. Once you open that up, let's click on fork to create a new copy of it. And we'll make all of our changes to the new copy. And again we're gonna get started with this first row, which contains three images in it. It's gonna be these top three images that we see here. So first we need to create a rule for the image row class. Let's jump into our CSS, scroll down to the bottom, and then maybe just above this image-row div rule, create another rule for just the image row class by itself. And here we're gonna set the display property to flex. Now initially everything is gonna disappear, because we haven't set a width for any of these flex items, any of these image items inside these image rows. So let's go into our first row here which is, again, gonna consist of images one, two, and three. So I'm gonna break these up a little bit. I'm gonna take our background image rule and nudge it down a little bit. Let's bring this all the way across just so we can see it a little bit better. We'll nudge the closing curly bracket down and we'll do the same thing for image two. And image three. This will make it a little bit easier to read once we start adding extra rules here. So for now let's just set the flex property for each of these to a value of one and we can already see that image show up. And we'll do that for all three of these initial images. And now when we expand this out, we can see all three of those images there. But I don't want them all to be the same size. I want a little bit of randomness, a little bit of variation here. So let's leave our first two at a flex size of one, and we'll set our third one here to a size of 2. So here's image one, two, image three here, let's set that to a size of two. And there we go. So our third one is twice as wide as our first two. So that takes care of our first row. Our second row here is just going to consist of images four and five. So we'll do the same thing for those. Let's go into images four and five here. We'll do the same thing we did before. Let's go ahead and nudge all of these, closing curly brackets down. And then we'll nudge the background image rule down as well. So once we get that done for all of our images, it'll just be a matter of going in and entering in all of our flex values. So again, our second row is just gonna be images four and five. So let's for image four, let's set our flex to one and then for image five, let's set our flex to two, for that one. So our second one will be twice as wide as the first, and then we make this a little bit wider. That looks pretty good. And I don't want any of these margins to line up, I want it to be offset a little bit. It makes it look a little bit more, or gives it a little bit more variety, I like the way that looks. So our third row, let me refresh my memory here, our third row is gonna have four images, images six through nine. So I wanna go into these, let's go to image six here. And let's just set them all to a flex of one to start with, just so that we can see what the images all look like. Cuz we really don't wanna just assign arbitrary numbers here. We want to take into account what's actually in the picture. And start from there. So this is what they look like if they're all the same size and that actually doesn't look too bad but I do wanna give it a little bit more variety. I want this first one for example, I wanna see more of that mug so let's take that first one, image six, and set that to a value of two and there we go, that already looks better. Our second one, let's leave that one and that would be image seven, so image eight. Let's bring that up and make it a lot wider, I like the oranges in that it brings a lot to the color palette so let's bring that up to a value of three, and then our last one we'll leave it at one. And it looks pretty good. So we can scroll up and down and see how everything looks so far and we only have one row left to go which is gonna contain our last three images. So let's jump back into our CSS and we have image ten, eleven, and twelve. And for this one let's go ahead and make those all even so we could either add the flex values inside each one of these individually or we could make a new rule with all three of them. So image10, image11, and then .image12 and just set the flex value to one for all three of those. And when we scroll down that looks pretty good. So we've got a really nice looking image grid here but once again once we get down to a smaller size it's just not gonna look too good. We get down to the point where we can't really tell what's in the images and it doesn't look good anymore. So I wanna create a media query. Down here at the very bottom of our codes we're gonna say add media, screen and and then inside parentheses. Let's say at a maximum width of 400 pixels. We wanna break this down so that there's just one image on each row or we'll basically just change the flex direction of our image grid to column instead of row. So let's point to that image grid class, image-grid. And we're gonna set flex-direction to a value of column. And I said image-grid, that's actually supposed to be image-row. Each one of these rows which is a flex container, is going to be set to a value of column instead of row. Now remember we never actually set it to a value of row, but that's the default value. So now when we get down to 400 pixels or less, hopefully that will switch to a column structure. And let's test that, let's bring this across, and there we go. Once we get to a certain point it just breaks down so that they're all on their own row. It's just one long column of images and that looks really good. And once you get down to this point, it doesn't really matter which row they're in. You can't really see them as rows anymore, but it still looks really nice. So it's always important to test your designs at different browser sizes. And by using Flexbox, it makes it really easy for us to break that down and to change it to a single column instead of several rows of images. So that wraps it up for our second image grid project. Thank you for watching. And I'll see you in the next lesson.

Back to the top