So, Nellie, you know how to design your own grid.
You're going to need to know how to use it.
I mean, there are rules, after all, and these guidelines that you're going to learn are going to
really help you work with your new friend, the grid.
So rule number one, your elements must always sit on some number of columns like we have here.
We have these cards that are all sitting on their own columns.
You may run into a case where Texas stretches way too much, you can move over here.
And you can see that text stretches too much in this container and there's not enough breathing room
in between each other and there's ways we can remedy this.
So we'll just turn on the grid.
We're going to we're going to just shrink this text.
Remember when we spoke about creating frames within frames and creating grids within those frames,
while we can do that here and we can see that we create a little bit more breathing room.
Between our grid items, it's really powerful for moments like this.
And like I mentioned before, sitting on a grid, these three elements are going to be on four columns
each and these two are in half, and there is that sense of rhythm and uniformity.
Rule number two.
Your elements should never be left in the gutters, if we shrink this like this that's in the gutter
like that, we can see already things are starting to look a bit off and.
That's because we are not really adhering to our grid.
Things start to look squished or just not even so, remember, never leave anything within that gutter.
I mean, it defeats the whole purpose of the grid.
Make sure your elements are in columns.
So let's just reverse what we did there, so let's Kamandi all the way out.
Perfect.
Now, this.
Just applies to the parent container, like I mentioned before, about creating frames over here, like
green grids and frames over here.
This is just going to apply to the parent container within the parent container.
We can create our own grid.
So we have to call them grid in here.
It's a little hard to see with Baseline Grid and this is that card that we saw originally and everything
is adhering to this grid within here.
So there is uniformity with in this container.
It doesn't necessarily adhere to the overall grid.
It adheres to its own grid.
And these grids should be consistent across your own UI elements.
This comes in handy when you want to customize a card or content within it.
And, you know, like I said before, the overall grid may not accommodate you as well.
Our next rule is your outside column is not for padding.
I mean, it's just not how it works.
It may be the width of your content, but it will have an outside margin.
Like I mentioned, if your screen expands, you can fix the width of your grid.
That's a discussion that you should probably have with your developers on how you want things to look
at certain sizes and break points.
But don't use your margins here and your columns as some sort of padding.
You could do that if it's actually intentional, but it's just something that you should stick to as
much as possible.
So next, release full bleed elements.
Now, this little landing page header over here.
It bleeds right off of our grid, it's going right into the margin, and the reason for that is that
they should go beyond your grid and stretch to the edge of your arthaud.
So it's going to extend right directly to the frame and that's fine.
The content within is going to adhere to this.
Generally, people say like hero images or headers and footers don't necessarily adhere to your grid.
I like to keep the content within those things adhering to my 12 golomb grid at all times.
But the images, if you want them to be full bleed, I think it's best especially for communication
between yourself and your product team to just bleed them right across during implementation.
This will go one hundred percent with right across here at your screen and that's it.
You're pretty much good to go and you can go off and build your own grid for your own designs.
And I think a great thing to do is try and build a mobile grid for our app that we're trying to build
for a visual.
So have fun.
Just remember how fun.
I mean, it's easy.
Create those styles like we said before, and follow these guidelines.