How to make a responsive 12 column grid in Illustrator

Hello, wonderful people. What we're going to do in this one is actually add these guides to our views, so we can use that lovely 12-column grid, and get started with our design. Let's go and do it.

Now we're going to make our grids. Before you do, if you move the Artboard, the grids don't come along for the ride easily, so just get them laid out how you want. Doesn't really matter how you've got your Artboards, but I'm going to line mine up this way. Maybe a little bit closer.

I'm moving it with the Artboard tool, it's this guy down the bottom here, moves just your pages around. So, first thing we need to do is grab our rectangle tool. Click on this guy here. You might be stuck on the circles tool or rounded rectangle tool underneath, grab the rectangle tool for me. In terms of the sizes, I want either a white fill, or a none fill, so that's the center of the box, and this is the line around the outside, and I'll want this thing to be anything but something that we can see on a white background, so black works for me.

I'm going to click, hold, and drag, and you can see mine's trying to snap. You can see, it's pretty clever, you can see that little word that says intersect. If yours is not snapping to it, go to 'View' and turn on this thing called 'Smart Guides', or 'Command U' on a Mac, or 'Control U' on a PC. It's a really handy one to use, especially at this stage. I'm going to zoom in a little bit, remember, 'Command -' or 'Control -', and I'm going to draw a box across the whole thing. It's a bit of a faf, a little bit. 

So we've got one big box, and now what we're going to do is, we're going to split it into columns. We find that under 'Objects', 'Path', and there's one that says 'Split Into Grid'. And this fun box appears. We don't want rows, we want columns. The up and downs. So we're going to put it up to '12', and in terms of the width, we're not worried about that, what we're worried about is the 'Gutter'. So the columns you saw at the beginning there is gaps between them, and there's a really common size for them, you might have to check with your developer or the CMS that you're using, most of the time, the 'Gutter' between them, on each side of the column is '15px'. That's either side. When they're next to each other, they add up to 30. So, there's your 'Gutter', set to '30px', and we're going to click '12'. Make sure you turn on 'Add Guides'. We're watching a preview so you can see what we're talking about. That would have been easier. You can see, I've got 15 pixels, and then 15 pixels either side of these columns, so together they make 30. Let's click 'OK'. 

Now what I want to do is, I want to grab my black arrow, my selection tool, and I click these guides that got made. Then I'm going to right click them and go to 'Ungroup'. So, it gets rid of this one, I don't want this horizontal one, I just want the columns, not these rows here. What we can do now is we can go through and-- actually I'm going to select these guys here. If you have used Illustrator before, you're thinking, "Great, they're guides." They're not, they’re just like these physical lines that are on the thing used as guides. What I need to do now is, I'm going to kind of lower them down, they kind of snap to the top there, so I've popped down the bottom here. What I'll do is I'll extend them down the bottom, so I've got them all selected. The easiest way to select them all. So if you are new, black arrow, select all just the tippy tops of them because we've ungrouped them,   left these guys behind. So I'm going to drag it down to match this up with the top, and down the bottom here, I'm going to scroll down and I'm going to drag these down quite far, because I have no idea how long this page is going to be, and it's easier to do it here when I drag it down.

I've got all of this down, I've got them still selected, don't worry about ones that are darker than the others, I clicked that by accident, still going to work, and we're going to go down to 'View', and we're going to go to 'Guides'. There's one here that says 'Make Guides'. I know it feels like we've done that already, don’t worry. Those are actual proper guides. So now what I can do is I can go to 'View', and I can go to 'Guides'. Yours might be by default, already locked, so if it says 'Unlock Guides' here, don't click it. But yours is probably like mine, it says 'Lock Guides', and that means I can't move them now. I was able to select them but now I can't. Now, all those junk that’s left behind, there's quite a bit of it, gone. That is how you turn it into a 12-column grid. You might have to rewind and play this thing through a couple of times, it did for me when I first started doing it, so don't sweat it. That is how you set up your columns.

Now what we're also going to do is, I'm actually going to-- I hate designing right to this edge here, so what I do is I grab my Artboard, I extend it out a little bit , just that I get some sort of a play area. It just means that-- it's hard to design within that little box and you need to butt everything up to this edge, and it just doesn't look right. I'll show you what it looks like here. You can see here, I've got this area here, and it's kind of white space. I know it's not always there, but it's often there, so I kind of expand it here as a designer, so I can see some extra bits. I know that the width is still-- between these two guides, it's 1200, which is perfect, and a little quick tip for you is that if you drag this out, say just going left to right here, if I hold down my 'Option' key on a Mac, or the 'Alt' key on a PC, you can see these both sides, just gives myself like a little bit of wiggle room.

Now, even though I said don't move them, we're going to move them along. There's no guides on them yet, so we're okay. So it’s a step repeat for the rest of them. So I'm going to do the next one for tablet. We'll do to this one together. I'm going to drag it out. I'll make it a little bit faster. We're going to go to 'Object', 'Path', 'Split to Grid'. And I'm going to say, let's make '12' of these guys. I kind of talked about it earlier, 12 is just too many, so I cut it down to '6', because it's divisible by 12, you can put 12 in there, I like 6 to cut it down, the gutter. Between these guys is still going to be '30'. And I'm going to click 'OK'. No, I'm going to select 'Add Guides', click 'OK'. And I've got this. So now what I'm going to do is, I'm going to select him, I'm going to right click him, and say 'Ungroup', and I'm going to click just the tippy tops of these guys, and I'm going to lower them down, and now I'm going to say 'View', I'll go to 'Guides', I'm going to say 'Make Guides'. I don't have to go and lock them again, they're all locked by default. It's kind of like an overall-- you don't lock particular guides, you lock all guides on all pages. So if I go to 'Guides' now, you can see, I can unlock them but I can't lock them because they are already locked, so I can select all this stuff. Bye bye.

Grab the Artboard tool, hold down your 'Alt' key on a PC, or 'Option' key on a Mac, drag the sides out just to give myself a little bit of play room, and we're going to do the next one. Now I want you to go off and do the next one by yourself. You can pause the video and see if you can give it a crack. I'm going to do it here. And you can fast forward to the next video if you've got the idea.

So I've got this one selected. Doesn't really need to go to the bottom. Remember, we're going to go to 'Object', 'Path', 'Split Into Grid'. In this case we're going to use '2'. I could put 4 if you prefer if you're going to do some kind of cool things in here, a mobile, I'm not, I'm going to put in a Gutter of '30'. I keep clicking OK, you're going to do it as well. Make sure you click 'Add Guides'; We forget about it every time. Click 'OK'. 

So we've got our pretend guides, we're going to select them, right click them. I'm using my black arrow. Go to 'Ungroup'. I'm going to select just the tippy tops of them, grab one of them, and drag it down, so it aligns with the top. I'm going to make them a little longer, I forgot to do it for these guys, I'm going to pay for that later. Drag these down. Now we go to 'View', 'Guides', 'Make Guides'. It's already locked, so we can grab all this junk that's left over, hit 'Delete', and we now have a 12 column grid across them all that we've kind of snuckily just down 6, and 2 on these ones here. I'm going to use the Artboard tool on this. Stretch out a little bit. We're going to hit ‘Save'. 

Alright guys, that's how to make a 12-column grid in Illustrator. If you are lazy, like me, you would download a template, and it will be this, right here, I'll leave that in the exercise file. I will call it 12-column grid in Illustrator template, or something like that, it will be in there, you can just open that and go forth with that one.