Hi everyone, let's add columns to this frame here... not the overall frame, because we've got this weird use case... where we just need four columns, just for this little box here... we'll add one little column layout grid, then we'll take it a bit further... and we'll work on this one, 'Shift 2', where we've got a fixed width navigation... maybe it's the admin part of our website, this has to be this size...

but the rest of it needs to be stretchy and responsive... it's easy to do... and allows grids to be a bit more unique... for our specific requirements, all right, let's go. So we can add columns, or any sort of layout grid inside of frame... so I'm going to grab my 'Frame tool'...

I'm going to draw out like a features set of boxes here... but I want it to have four columns... so instead of trying to do it to the overall frame, which is my phone... I'm just going to do it to this frame... I'm going to say 'Add Layout Grid', and I want it to be 'Columns'... and I want it to be, say, '4', which is way different from my 1...

but it's only unique for this... like little features cards that I'm going to do in here... little boxes that you can click to go to the different... I don't know, sub categories of gigs... and the gutters are going to match other stuff, 24, maybe 16... and it means, now when I draw, grab my 'F' tool...

and I draw boxes inside of it... I can get it to snap to the rows... but also, I can get it to snap to this new columns that are inside of it... and I can say, can you be left and right, let's give it a Fill color, where are you? Invisible... Fill color of, not white, it means that these will adjust...

so you can have columns not just in the parent frame but inside child frames... for like special occasions like this... let's do that other one you saw at the beginning, with the fixed Left Nav... so let's jump out of mobile land now and let's hit the 'F' key... and let's go to 'Desktop', and I'm going to pick generic desktop size... and I'm going to put it down here.

What we want to do is, we don't want the generic 12-column grid... 12 columns is a really good grid for desktops... and I'm going to do the same thing, gutter's going to be 24... I'm going to have a margin of 32, maybe a bit more, 40... the problem is, is I need this fixed Left Nav... so what I want to do is, 'Shift 2' to zoom in...

let's use the 'F' key to design my navigation... so I'm going to-- it's going to be a fixed size... how wide is it going to be? It could be using the 8-point grid, you can type in anything you like... because it's a fixed width, it's not going to change... depending on the different computers that are going to be viewing it...

this stuff needs a change, this doesn't... needs to be a fixed size, to fit everything we need in here... so what do you do with this? So what I'm going to do is, give this a Fill color... pick anything, as long as it's greenish... and what I'm going to do is copy and paste that style...

or we could delete it, but I'm going to select it here... let me run the little edge bit there, go 'Copy'... I'll delete it off this, and what I'm going to do is... I'm going to grab the 'F' for frame... and I'm going to drag out a box that goes in here, see what we're going to do? Just going to apply it to here...

so you need to get out of the mode of applying grids just to the background... you can add it to individual frames, so let's hit 'Paste'... and what I want to make sure is that it is doing, constraining left and right... this one is not going to constrain, I wanted this to be a fix... so that's going to stick left... and what I might do is do top and bottom, so it stretches...

same with this one, top and bottom. Now we've got a fixed Left Nav and stretchy columns on this side... that is layout grids within child frames, not just the overall parent... all right, we've got our grid fix done now... let's get on to something else.