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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.4 CSS3 Grid Image Gallery

CSS grid is one of the most promising developments in CSS in a long time. It makes layout control more powerful than ever before, yet with far less code used in the process. In this bonus lesson we’ll use CSS3 to create an image gallery.

Related Links

4.4 CSS3 Grid Image Gallery

Hey, welcome back to another bonus lesson. In this lesson, we're gonna have a little play with one of the coolest new things in CSS and that is the CSS Grid. CSS Grid takes things that used to be very difficult to achieve or require a lot of JavaScript, or a lot of messing around and boils them right down into just a couple of lines of code. So, what we're gonna do with CSS Group to get across a little bit is to create this image gallery here. So, we just got a few different images. We have different aspect ratios. Now as the name suggests, CSS Grid allows you to work with a system of rows and columns to control your layouts. But what it can do that is very difficult or impossible to do without CSS Grids is it allows you to control your layout in two directions, vertically and horizontally. So in this example here, you can see up in the top right, we have a portrait shaped image and this image spans two rows in our grid. So we have the first row and the second row, and this image is going across both of them. But we also have, down in the bottom right, a wide image that's spanning two columns. So, we have this column and this column and this wide image is spanning across them both. Now before CSS Grid came along, if you wanted to do something like this, you could either have the ability to have this portrait image. Spanning two rows or you could have wide images spanning two columns. You couldn't have both with pure CSS. The only was you could do it is by adding in some JavaScript that would calculate your layout for you and then rearrange all of the content in the browser. So, this is a pretty big change in the way web design can be done. CSS Grid is possibly not fully ready for primetime due purely to the need to sometimes support legacy browsers, but you should definitely get into playing with CSS Grid. Because it really is great and once it does take over. Controlling that is gonna be so much easier. So with this project, I'm not gonna be going with the chunks of code copied and pasted and then explained like with our other lessons and the reason for that is we are not gonna be writing a lot of code and that's because CSS Grid doesn't need a lot of code. And in this case, it's also better that you see the CSS Grid taking shape one line at a time. So, we're gonna type everything out one line at a time. So, let's jump over into our base pen. You can focus one to get started. We've already got our images laid down, but they're not in any type of a layout. Instead of using a slider class on this, we're using a class named gallery and we just have simple HTML inside. We just have a div wrapping each one of our images. So, we're gonna start by writing some styling for this gallery class. So, add in that class name and the first thing we're gonna do is just put a little margin in at the top just for some spacing. Give it some breathing room. And now, all we have to do to activate grid mode is to just add display grid. And you're not gonna see anything change just yet, because we haven't given our grid any information about how our columns and our rows should be setup. Before we do that, we're just gonna add in a little card to control each one of our images and make sure that they don't become too large for the columns that we're gonna create. Otherwise, you won't e able to see the effect of the grid. So, we're just gonna add in an image element and we're gonna set this max width to 100%. So now, we're ready to start setting up our grid columns. To do this, we're gonna use the property grid-template-columns. And we're gonna start by using a unit that you weren't have seen before, if you haven't work with CSS Grid yet and that is 1fr and what we're actually doing here is two things. One, we're setting the number of columns in that grid. And two, we're setting the width of those columns. In this case, we're barely putting one value. So that means that we only have one column in our grid so far and that's why you don't see any change yet, and the value that we've set is one fraction. So, that ft stands for fraction. Now, the best way to show you how that works is to add in another one of these. So, we're gonna add in a second unit. Meaning that we're gonna have two columns and we're gonna add 1fr again. And there, you can see that now, our columns have showed up. We have two of them and each one is taking up half of our available width. So what this is doing is it's saying, all right, I know I need two columns and I'm gonna make each one of those columns. One equal sized fraction of the overall width. So, this is one fraction and this is another fraction. And if I change this say to two, now this is taking up two fractions while this is taking up one. So if we add these numbers up, we get three. Maybe that the first column is gonna take up one-third and the second column is gonna take up two-thirds. So now, we're just gonna put this back to one fraction. Because what we actually want is three columns that are all of equal size. So, we're just gonna put in 1fr one more time. So now there, we have three columns that are all equally sized. So, you don't have to worry anymore about trying to deal with 33.333% when you're trying to control your width. Just use that fr unit and it all gets calculated automatically for you. In this case, because we know that we're using the same unit for each one of our columns that 1fr, we can write this in a little bit more of an efficient way. Instead, what we can put is repeat and a set of brackets. Then we're gonna 3, comma 1fr and that gives us the exact same effect. And what we're doing here is saying, we want three columns and we want them all to repeat with the same width and that width is one fraction. So now if I change this number, let's say, we change it up to four. Now, we have four equal width columns. Five equal width columns. Six equal width columns and you can keep changing that number however you need to. So once again, that's a very, very efficient way to control your layout and then we're just gonna add one more thing to our gallery class. And that is right now, you can see each one of our columns is lining up flush against the one next to it. But we wanna have a little gap in between each one of our grid cells and we can add that in with the property grid gap. And we're gonna set the gap to 1vw, so that's 1% of the view port width and there is our gap. A great gap will actually take care of the gaps between the columns and the rows for you, simultaneously. There are properties that you can use to set them independently of one another. But right now, this is adding the same size gap here as it is here. It doesn't look quite the same right now, but you'll see that it is same by the time we finish doing the rest of that styling. So now, what we wanna do is get rid of these big gaps that you're seeing anytime you're next to a portrait shaped image. And the way that we're gonna do that is instead of having this image pushing out the size of this whole row here, what we're gonna do is say that we want this image to span across two rows. So then, that will allow these two images to relocate themselves into this gap here. The way that we're gonna achieve that is by adding a class that we're going to apply just to those portrait images only. So, add portrait. And then we're gonna use the property grid-row. And we're gonna set it to span 2. So wherever this portrait class is used, that's gonna tell the browser to make that cell span across two rows. So now, all you have to do is apply this class to the correct divs. So we have one, two, three, our third image. And four, five, six, our sixth image by portraits. So one, two, three. So, add in our portrait class and there we go. So now, our images here have relocated themselves up to where they should be. Now, I mentioned before that you could see that the gaps in between the rows were not quite the same as the gaps here and that's only because we don't have these images quite filling up their cells. So to fix that, what we're gonna do is add a minimum height and width on our images of a 100%. So now, that forces these Images to stretch down and fill up the whole space. So now, let's also add the portrait class to as sixth image which is here. So we have third, fourth, fifth and sixth. And there we go. So now, both of our portrait shaped images are sitting very nicely with the other images in their rows. Now we've got just one more image that's still a bit out of whack and that is this image, which is actually supposed to be much wider than any of the others. This image is supposed to take up two columns. So to make that happen, we're gonna do the same thing as we just did with our portrait class. We're gonna create a class instead named wide. And instead of setting the grid-row property, we're gonna set the grid-column property. And just like we did with the portrait, we're gonna set this to span 2. So now, we will take our wide class and we will apply it to the very last image in our gallery. And there we go. Now, we have our wide image spanning the full two columns. And just to wrap things up, we are just going to add in a little box shadow to give a nice effect around each one of these images. So, that gives you an example of how little code you need to write when you're working with CSS Grid to create layouts that can do things that were previously very difficult to achieve using pure CSS. In the next and final bonus lesson, we're gonna be playing with the full screen pseudo-selector which is something really cool that allows you to style an area of a page differently when that page has been put into full screen mode. So, what we're gonna do is work off the little gallery that we created here and we're going to set things up. So that when the browser's in full screen mode, the layout of this gallery changes into one that's more suitable for the increased amount of screen real estate that there is to work with. So, we're gonna go through that in the next lesson. I'll see you there.

Back to the top