Hey, welcome back.
So I want to get into grids and spacing.
Now, this is very important because it dictates how we space elements out, how we choose different
unit sizes.
And what I've done here is I've used the four pixel grid and I'm using multiples of eight, so let's
get right into it.
So I've created different grids here and we've created them together in the past.
And my mobile layout grid is just a regular eight column grid.
And let's take a look at what it looks like when we go to Ed Styles.
So we have an account in terms of our columns, and I like using an eight column grid just because on
mobile it gives us a lot of variance in terms of how we like display cards, especially our application.
I think it's really card heavy.
So we have different variants in terms of like larger cards, cards that bleed off in terms of horizontal
fashion.
We have cards that stack upon each other.
This allows us to do two columns in terms of cards in a column, a larger column, and then something
that bleeds off, which you'll see later.
This is how I've set it up color.
I just kind of use the standard color.
I have an eight count type to stretch.
Margin is set to twenty four pixels and my gutta is 16.
So my margin over here is at twenty four pixels, which is another multiple of eight.
My gutta is sixteen which is another multiple of eight.
If we move over.
I've created just a baseline grid if you wanted to use that as well.
Within your projects you have the option to this really helps just if you want to space things vertically.
You don't have to necessarily use this just within the entire mobile screen, if you have a I'll show
you how I would apply it sometimes.
So if I've created a frame, maybe this is a card.
And I go to my local grid, which is right there.
I can just apply to a card and now I have a different way to track my vertical spacing within this card,
so.
There's another one, this is an eight pixel grid.
Let me just change the name into that eight pixels.
So we have our eight pixel grid, which is just a little bit larger.
I prefer four pixel grids because there's a lot more variance within that.
It gives you a lot more to work with.
This is more of a preference thing.
So still a pixel grid.
We also have the four pixel grid combined with the mobility grid that we've created here.
And I've done the same thing also for an apex baseline grid.
So these are the baseline grids and the grids combined.
And I'll show you what that looks like.
So this is my style.
And what I'm going to do is I'm just going to select this little icon here that says that style.
And once I've done that, you can see what I have here.
So if I go to edit the properties, I'm going to see if those are my rose.
My rose is my baseline grid and I have them set to auto account type right from the top.
I, I've changed the color just so I have a little more hierarchy within here so I can distinguish between
both of them.
I have a four pixel height, I have zero offset and a four pixel gutta.
So that is how I've set up my spacing for this project.
And like I said, this could change if this is a mobile app and if we were working in a responsive application,
we may see many more variations.
We may see like a desktop version, we'll probably see a tablet version, we'll probably see even a
little extra large desktop version.
So keep that in mind.
Don't just stick to one grid.
You probably have variants if you have a responsive system.
But this is going to really be what you base everything off of.
You have your grid here and your spacing is based off of eight pixels.
In increments of that, so this is grades and spacing.