Hi there, in this video we'll make a column grid... just one big one with margins on the side, we'll make a second grid... in this case, an 8-point grid, so we can get some good layout within our cards... not just the parent frame... I'll show you how to copy and paste grids from one frame to another... I'll show you how to create a style, edit that style...

and a couple of shortcuts, let's get into it. Let's make a grid, let's click on the first phone frame... and I'm going to say, 'Layout Grid', '+'... and I'm going to use the columns... so hit on the little icon there, switch it to 'Columns'... I'm going to have 1 column layout for my small phone...

and I'm going to have a margin of, a really small kind of tight layout... uses 16 pixels, like it's pretty close to the edges... and if you've got loads to squeeze on you might have to do that... but I'm going to use 24, give it a bit more breathing room around the edges... and I have the luxury because I don't have so much to cram in, cool. Now you can copy and paste these to different phones...

if you've got lots of different ones you can just copy and paste this across... so in my case I'm going to click on the frame... what you want to do is find your layout grid... and then you want to click in this random area here... not there, there... just kind of allows you to select stuff...

you can do that with lots of things, you can select in these weird areas here... and you can copy and paste them once you've selected them. So I'm going to go, you, I'm going to go 'Copy'... and I can click on as many phones as I like and just hit 'Paste'... so let's just 'Command C', 'Command V', or 'Ctrl C', 'Ctrl V'... just your regular copy and paste...

that's a good way of getting across lots of documents... but problem with that is, it's probably easy just to use the style, Dan... so let's undo that, I'm going to click back on my first one... and I'm going to hit the little four dots there... say, make a style from this grid, I'm going to add one... and I'm going to call this one "1 Column"...

and I might put the margin in here as well so I know what it is at a glance... because I might have to have, in different pages... might have to have different margins. All right, let's create a style, if you need to update a style... you can either click off in the background so you see all of your styles... or click on the phone, you'll see your style kind of there...

you can break the style so it's not connected... or you can adjust it, we can adjust it by just clicking on it, there it is... and you can edit it by clicking on this little guy, 'Edit Styles'... and it halfway gets there, you're like, "Great"... I can change the name, but I want to change, say the margin from 24 to 32... you actually can click on this here, this little icon...

then you can get into like, the depths of it all, change your margin and your gutter. So that's creating and editing our grid... the shortcut for turning it on and off is 'Shift G'... have I done that already? I'm not sure... 'Shift G', because it's great when you're laying it out...

but when you want to design stuff, the big red thing is not that useful. The other thing to make sure you're doing, when you've added your grids... is to set the constraints... depends if you want your, you know... I'm going to want mine to snap to the side and snap over here... same with these two, actually, I'll delete that one...

because they're just instances of itself, and I'm going to make sure that... both of these selected are not just left, but a left and right... so that when they adjust they come along for the ride, otherwise they don't. Let's make one more style, we're going to use... instead of the columns we're going to make a grid... we're going to do it on this card here because we had...

you know, we were trying to push things over, like 16 pixels, and down 16 pixels... let's say that I want kind of bottom of my card down here... how do I make sure it's kind of defaulting to multiples of 8? We can do that with a grid, so I'm going to click on the actual... we could do it to the instance... but if we do it to the main component it goes through all of them...

I can say, actually, I want a layout grid on you... I'm going to leave it as the grid, it's defaulted to 8 points... we can change it by clicking on the icon here... and it just means, now when I'm laying things out with my frame... I know that it will snap, can you see, it snaps to the different eight points... consistency, Dan, I love it.

What I might do is... the edge of this, like there's still some responsiveness... not everything is going to be 8-point... because all phones and desktops are different... but let's get my main component laid out nicely... I've just zoomed in a little bit, so I can actually see...

you know, I'm on the 8-points... it doesn't snap when you're doing the outside of the frame... snaps with things on the inside, like that frame that I did, that you can't see... let's give it a color. The edges here, let's just tidy it up by saying, the bottom is... where is it, 8 points...

the bottom part of this is going to be 8 points as well... let's turn it into a style, so I'm selecting the outside... and I'm going to say, let's make you a 'Style'... of "Grid"... and this is our 8-point grid... let's create our style.

So we've got a couple of different styles... one thing you might notice, that I just noticed as well... is that is not adjusting... why is that not adjusting? Constraints, Dan... so I'm going to stick it to the edge, there...

but I wanted to actually expand and contract depending on the parent frame... so I'm going to say, we know, constraints left and right, it's going to help us... and it's going to be stuck to the bottom, nice... remember the shortcut, 'Shift G', on and off. Next thing I want to do is... when we're resizing these for the different ones you can see...

it's not-- how do I get it to snap to like 8-point? I can see the grid inside of it but the outside frame doesn't... I can zoom in and go... all right, here we go... let's just get this to snap to that 8-point grid, perfect-ish... let's add our third set of grids, which is rows...

we've done columns, we've done grids... let's look at adding rows.