FREELessons: 15Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

7.1 Basic Image Styles

This project will be very similar to the previous one, but with a few key differences. These differences will require a slightly different HTML setup, which we’ll talk about in this lesson.

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.1 Basic Image Styles

Hello and welcome back. In this lesson we're gonna get started on another image grid, but this one is going to be a little bit different than the one before. Our first image grid had a grid of images that were all the same size. All the same width, the same height, they were all right up against each other. And it was a really cool effect. It was really easy to achieve with Flexbox. But in this one we're gonna make it a little more random looking. We're going to give the images different sizes. We're gonna have different numbers of images on each row. So this one is gonna be a little bit more complicated than the last one. But with Flexbox we'll find that it's still really easy to accomplish. And you'll notice in our HTML that we see here that it's already a little bit more complicated because we have numerous rows inside our image grid. And you'll notice that these rows have different numbers of images in them. The first row here has three of them. The second row has two, the third one has four, and then back to three. So we can already see a little bit of variety there in our HTML. And if we jump to our CSS, you'll see that I've already punched in the URLs for all of the images. And these are the same images we used before. It's just gonna look a little bit different this time. So you can find the URL for this starting pen in the course notes for this lesson. Once you open that up go ahead and click on Fork to create your own copy of it, and then we'll make our changes to this new copy. And everything we have left to do is gonna be in our CSS. So let's take another look at our HTML very quickly just to review the structure. So we have a containing div with a class of image-grid that contains everything. And then we have four different rows, each of them with a class of image row and each one of those rows has a certain number of divs in it with a class of image one, image two, image three, etc. And then in our CSS, we're pointing to those image classes image1, 2, 3 etc and we're giving them background images. So in this lesson I wanna start applying some basic styles to those images, and then in our next lesson we will apply the Flexbox styles to finish out our grid. Now the main thing I want to accomplish in this particular lesson is I just want to be able to see the images to make sure that these background images are working. So I'm going to target the divs here inside each of these image row divs, so we're gonna point to the image row class and the divs inside that class. We'll jump back into our CSS, we'll go down to the very bottom and skip a couple of lines and I'm gonna point again to the .image-row class and then space, div. We're gonna point to the divs inside that row. And each one of those divs is going to have an image applied to it. So let's go ahead and set our height here to 240 pixels, and we can already see the images appearing. There should be 12 total images here, and if we scroll down, we can see them all. We can also see that by default they are repeating horizontally. They would repeat vertically too if there was enough room for it but we do want to limit that. We don't want them to repeat. So, we're gonna go back into our image-row div class, here. And after the height, let's set our background repeat, To no repeat. And then I want to make sure that the background is covering the entire div. So we're gonna set the background size here to a value of cover, and that will stretch it out so that it takes up the full width. Now, these images aren't gonna end up being this wide. We are going to put them in rows, but that gets us to a good starting position. And the last thing I wanna do is to center these just like we did with the last grid. So we're gonna set the background position for each of these divs to center center, so that it's centered both horizontally and vertically. Another thing I wanna do for this particular image grid that's gonna be a little bit different than the last one is I want to put a little bit of a white border around all of our images. So that it kind of looks like it's in a complex picture frame, of sorts. So we're just gonna go back into the same image row div rule here, and I'm gonna set margin to four pixels, and that should put a margin around all of our images, and it does. So now we can resize our browser window. We can see that they're automatically resizing as we change the size of the window, and that has nothing to do with Flexbox cuz we haven't even touched Flexbox yet. That's just because these divs are taking up the full width of the background. So in the next lesson we will jump into the Flexbox properties. We're going to make this look a little bit more interesting by putting, well let's go back to our HTML here, by respecting these rows that we've created. So we're gonna have a row that has three images in it. One that has two, one that has four, and the last one will have three as well. And we're gonna randomize the sizes just a little bit. Now we're not really gonna randomize it, we're going to hard code some numbers in here, but we're gonna make it look a little bit more random in dynamic. So, again we'll get to that in the next lesson. Thank you for watching and I'll see you then.

Back to the top