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

6.1 Basic Styles

In this lesson, you will start by building out the basic styles for an image grid. Once these are set up, the hard work will be dealt with and we’ll be able to finish it off in the next 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

6.1 Basic Styles

Hello, and welcome back. In this project we're going to be building a simple image grid using Flex Box, and we're going to be doing it using background images. As we can see here in our HTML we have a series of divs, but none of them have image tags in it. Because again we're going to be using background images. So you can find the URL for this starting pen in your course notes for this lesson. Once you open that up let's click on the fork button to create a new copy and we'll make all of our changes to this new copy. Now if you jump into the CSS you'll notice that there are some styles applied already even though we don't see anything in the browser window yet. And these styles are simply applying the background images to each of these image classes. And again if we go back to our HTML, you can see each of these divs has a class of image one, image two etc. And then all of these image divs are contained inside a container div called image grid. So by now you probably have a good idea of which class we're going to be using or which selector we're going to use as our flex box container. But we'll get to that soon for now I want to apply some basic styles to these image divs. So that we can actually see those images show up over here. So I'm gonna jump into our CSS and let's get started. So I'm gonna scroll up to the very top and then above this first image div here I'm gonna get started. And what I want to start with is the individual image divs, so we could do this one of two ways we could add a second class to each of these divs of image. So it would say, image space image01, etc, etc, and then apply our styles to that image class. Or, we could just apply our styles to the div element inside the image-grid class. And that really just depends on if you plan on having other types of divs inside your grid. But for our purposes here we're not gonna have any other divs inside this grid except for these image divs. So we will be safe doing that. So I'm gonna point to the image grid class .image-grid space and then the div element inside that image grid class. So for these image divs I wanna make sure they're wide and tall enough to actually display these images because, just because you have a background image applied to these divs doesn't mean you're going to be able to see anything. Right now, these HTML elements, these div elements, have no content inside them. So unless we put some content inside it or unless we specific within height, we're not gonna be able to see those image backgrounds. So I'm gonna start by setting the width. Of these divs to 25%. Eventually when we create our grid I want each of these images to take up one-fourth of the width, or 25% of the width. Now we also need a height or we're not gonna to be able to see anything. So we're also going to set the height here to 240 pixels. And once we do that we can start to see some of these images and these images are cut off because the images are wider than what we're seeing here. All of these images are 320 pixels wide. So we're not seeing the entire image but that's okay for now at least we're seeing something we know that those background images are working. The next thing I wanna do is to set a few properties on these background images. First of all, I wanna make sure that those images don't repeat, so I'm gonna set the background repeat property equal to no repeat. So no hyphen repeat and then I want to make sure that the background image covers the entire width and height of our div and the way we do that is we change the background size property to a value of cover. And then the last thing I want to do is I want to position these backgrounds, and if we center position each of these we're going to be able to see at least the main part of these images a little bit better. So I'm going to set the background position property to a value of center center and that will center at both horizontally and vertically and now we can see the main subject of each of these images a little bit better. And as you can see these images are also 25% of the entire width of the screen. So if we make this smaller, those widths are going to get smaller as well. And one last thing I want to do is I want to get rid of the borders around the edges of this entire document. So I'm going to come up to the very top here. And I'm gonna set a property on the HTML and body elements. I'm gonna set the padding to 0 and the margin to 0. And there we go. That gets rid of the extra padding. So having done that all we have left to do is to apply some simple flex box CSS rules to our document and we should get this looking really, really nice with very little effort. So let's save our work and we'll get started with that in the next lesson.

Back to the top