How to create a responsive image grid in Dreamweaver.

Hi there, in this tutorial we're going to take our design from Illustrator here where we've got 3 columns, about 6 images, and this one's only got 2 columns, when it gets down to Tablet, and then down to Mobile, it's got 1 column and we turn a couple of the Images off. So 6, down to only 4 of them. It will end up looking something like this. So here's my Desktop view, down to Tablet and then, down to Mobile, where it is just 4. Plus it will do the cool stretchy thing where they kind of take most use of this space. So let's go and learn how to do that now in Dreamweaver.

We're actually back in Illustrator because I want to explain how the structure works. So what we're going to do is we're going to create these Columns here. And our design has some changing, you can see it has 3 columns, then down to 2, then down to 1. So what I need to do, or need to explain to you is we're going to create a Box, so 1 column here. And we're going to make it 33% of the width. And that's going to stack after each other, and because we've said, "You, Image, or Column, be 33%" the next image is going to fit, the next image is going to fit, but the next one is now in the front. It's only 100% to pick from. So it's going to push down to the next row.

The reason this is useful, is that when you're in Tablet is, you can say, that exact same Image, you now occupy 50% of the space. So, 50%, and then tries to fit in the next one, but there's not enough room so he breaks down. Same when we get down to Mobile. Same Image, but we're going to say "When you're in Mobile, you're 100%, buddy." So, another 100% can't fit, so it fits underneath and they just keep stacking. So essentially, these guys are stacked one on top of each other but we just give it different percentages. And that's how responsive kind of tiling like this works. Let's go and actually do that now in Dreamweaver. I promise, this time, Dreamweaver.

So before we put in those Columns, we need a Container to put around it. At the top here we've got a Container called Hero Content. And remember, that's this Text at the top, that little Tick, the H1. We've kept that in a nice little box. We'll do the same for our Images so that mainly so we can put some Padding in between this and the Hero Content, because if I have Hero Content selected, so click in here, somewhere click on 'Hero Content'. And go to 'Insert', 'HTML', 'Div'. I'm going to put it afterwards. You can see down the bottom here, it's actually banged up right underneath the 'Let's Talk' button, not this Image in the background. Mainly because this is a Background Image, and we said "You be in the background, and nobody can really affect you." That's why we put all that Text on the top. So we need to add some Padding to it, so let's create a Class to do that.

So, 'CSS Designer' we're going to do it Globally, and we're going to say-- we're going to make one up called 'image-grid'. Call it anything you like. And we're going to add some Margin to the top. Nothing's applying, so over here let's apply our Class first. 'image'. There's a bit of Padding there, let's add a bit more till I'm roughly happy with that. There he is there. Now we're going to put in our Columns. So, with our Div, 'image-grid' selected we're going to go 'Insert', we're going to insert another division in space. We're going to say, "Inside of here, I would like a column." I'm going to call it-- it's a little bit hard when you start having this now. I'll put in a Div, and another Div inside of it, and you're like, "Which one am I messing with?" Let's quickly go and add a Class to it.

So what we'll do is, 'CSS Designer' And let's make a Class. We're going to call this one 'col' instead of column. That's just kind of an industry standard. You can call it 'column', and often I do it because it's easier for me to understand. But I want to get used to some of these syntax or commonly used names so that when you start working on somebody else's project or another site you might recognize these. So, this Column here, let's first of all give him a background color. We don't really need the background color, I just want it here so that I can describe what I'm doing. And I'm going to apply it here, say '.col'. Sometimes it's easier, look down in Code view, you can see I've got Div called 'image-grid'. And inside of this, is the beginning and the opening. Inside of that is my 'col'. And there's also this random text, which I'm going to delete from Code view. Don't need you anymore. Slightly more useful.

So we could now go in and click on this one. Can we right click it? Yes. And go to 'Duplicate'. And have six of them, 'Command D' on a Mac is the shortcut or 'Control D' on a PC. So we got six of them now. But before we do that, you can see, they're stacked after each other. Then I undo which is 'Command Z' on a Mac, or 'Control Z' on a PC. What I want to do is add a Class specific for Desktop because if we look at Illustrator you can see, Desktop is 33%. This is 50%, and this is 100%. So we're going to create three Classes and just trigger them at different Media Queries. We can say, "When you're Desktop, be 33%" "50%, 100%'" So create the Desktop version first. So, first up we're going to create a Selector. We're going to call it-- put in 'Styles', 'Global'. And we're going to call this one '.col'. And we're going to use 'lg'. Now 'lg' is just another common way of calling Desktop view. You could call it 'column-desktop' to make it easier for yourself, but you'll see in other sites, people using 'col-lg' instead. So we're going to call ours that, and we're going to say "I'd like you to be a width of percentage, make sure it's percentage, and 33%. Often it will switch back to pixels.

So if you are having trouble, and you are like, "Why is it not working?" it's probably-- by default it really wants to be pixels, you got to kind of force percentages in there. So, that's working, we need to apply it now. So, you, 'col-lg' is only 33%. Awesome, huh! So now we're going to create-- let's just duplicate it. So, let's 'Duplicate'. And they kind of stack on top of each other. They're not stacking next to each other like we need just yet, but that's going to be the kind of basics. We're going to have lots of these in total. Let's go back and fix the first one, I'm going to undo a few times. There it is.

So, what I want to do is get him to Float left. So what I'm going to do is, my re-usable Class, 'float-left'. Now I'm going to Duplicate them, so 'Command D'. Hey, now we're talking. And I got 6, and if you need another one just hit 'Command D' on a Mac, or 'Control D' on a PC, and it keeps duplicating them. Let's have a little look in the browser, so 'Save All'. So I'm into the browser. You can see here, they're nice and responsive as well, because they're 33%. Remember, they don't get bigger than our max-width that we set for our Desktop, but they get nice and squidgy down here. Awesome!

One of the things that I want though from my design is a bit of space in between so we're going to go into Dreamweaver. And what we're going to do is for the 'Column Large', we don't want to do it for 'col'. I'll do it for the Column. So every single column on every single view not just the Large, is going to have a bit of Padding which is true of my design. So what I'm going to do is, 'col' I'm going to say, I like a little bit-- I'm going to use percentages. So I want to put 1% this side, 1% this side. And 1% this side. You'll notice that my design there has gone and broken. It's because this adds to my 33.3% that I added to my box, so 33.3% plus times 3, plus the Padding either side wrecks everything, so what we're going to have to do is jump into my 'lg'.

So 'col-lg', and our 33% is going to now be 31.3%. That's not what it is, jump back to pixels, remember I said it twice to do it. Does it to me to. So now they all fit. So whatever you add in terms of Padding, you're going to have to minus off the width that you're using. And the last thing is, I actually want Padding at the bottom as well. So, Margin, we're going to do it back to our Column. And you go to 'col', and '1%'. Awesome! Need to see mine, the actual spacing is a little different because this is 1%, but it's either side, so I've got 1% plus 1%. It's actually 2% in here. So at the bottom here I'm going to do 2%. Nice! Now it's even.

We'll leave that tutorial here. In the next one we'll add Images to them, and there's a couple of little things we need to do to make them responsive, but the guts of it is in there. Let's get on to the next tutorial.