And welcome back.
Now we're in fact, we're going to talk about responsive grids now you may be designing for multiple
screens.
I mean, we do that a lot and grids can really help with that.
We just spoke about layout grids and typographic grids and the history of grids.
But grids are used to scale up and down to display information on multiple set of screens.
So let's jump in.
We have some cool demos here.
First is the fixed grid.
Now the fixed grid has a fixed container with position.
I can demonstrate how this works, so as you adjust the frame.
This container that's housing the actual legal grid is going to stay fixed and all the elements within
it will stay fixed as well.
So this actually maintains the exact measurements while the margin sizes increase or decrease like this.
Even when I decrease it like that, they will stay fixed.
Now, this is great if you want all your elements to stay proportional, but when you get to larger
screens, you may end up with way too much.
White space like this would be an extra large desktop screen.
And you're like, wow, that's a lot of white space right there.
And there are ways to handle that.
But fixed grids aren't really used as much anymore.
So let's just put that back there.
Next is the fluid grid.
Now, this is really cool.
Now, food grids are measured in percentages, so the columns of the grid or your entire grid will shrink
or grow depending on the size of your screen.
Let me show you what I mean.
So here is our grid, and you'll notice when I stretch it, the columns will stretch to.
And when I shrink it, the columns and the content shrink as well.
All of these sizes will increase and decrease based off of percentages.
That's kind of cool, right?
You know, it's even cooler, take a look at those margins in gutters.
This is Zoom In now got margins on the right, gutters in the middle.
Look at that.
They aren't even.
Shrinking.
Are growing, the only thing that shrinks and grows is the size of your column, your gutters and your
margins will always stay the same.
They don't change and they adhere to your base unit.
So in this case, let's take a look.
This is our layover here.
We got twenty four pixel gutta and twenty four pixel margin and they are staying the same.
Now one column is that one year on larger screams and you want to utilize some extra space.
Sometimes your content may look kind of stretched out, but there's ways to handle that.
You could actually define a set with for your container but still have to be responsive.
Now, responsive Grit's.
We have a set of four over here, this is always a kind of a topic that designers like to kind of not
really talk about as much.
You know, we need to always keep a breakpoints in mind when we're designing for responsive layouts.
As you notice, based off of our little demonstration there with fixed and fluid content, content will
stretch and shrink depending on your screen size.
And that's fine.
We expect that we can run away from this, but we have a way to work around this.
So breakpoints allow us to scale up and down our design based off of desktop and mobile.
So we have like extra large screens, large, medium, small.
So this is probably like a tablet.
This is your mobile screen, probably like your regular laptop or small desktop and even larger screens.
The first step is to always establish the set of breakpoints.
Don't worry too much, there's a bunch of literature out there about certain breakpoints and what works
best.
But you're sort of breakpoints that I always use and it helps me get started on projects.
So from small zoom in here.
This one's at three hundred seventy five, but I usually define it by a little bit larger, I think.
Six hundred is fine for smaller phones.
Something like that, this is just like your typical size of like an iPhone X screen or in excess median,
you got six hundred to eight hundred and ninety nine.
This one's at 94.
So you get.
Erica.
I could just bring that up.
And then larger, we have nine hundred to one thousand one hundred and ninety nine, so this one we
can fix to that, let's move over our content.
See, sometimes there's really large screens that we need to think about, this would be our large,
medium, something like that.
It's a bit like that for small and for extra large.
It's twelve hundred pixels with an above.
These breakpoints will help you define small, medium, large and extra large breakpoints, and you
can definitely modify your layout to change dramatically based off of that breakpoint, or you could
change slightly.
So cyclical.
We got here after we modified just a bit.
Let's just align them together.
There you go, we just distributed horizontally.
So we can see on our extra large column grid, we have a 12 column grid.
And when we move a little bit down to large, nothing really changes with the layout, but we still
are the same type of column grid.
And when we move down to a medium grade, we start seeing some changes like we can use a six column
grid.
This would be typically a smaller laptop screen or even a tablet.
So we start thinking about things like how are these users actually experiencing our product?
Do we need to scale down elements to me to scale up elements just to keep them topical?
And on small, like I said before, you could use like a two column grid, but I think that really limits
you.
So over here I have a six column grade.
So we have.
Two items together and there, and we can even do three items on this one.
It gives you a little more variety.
Before I said I like a Congress and I'll show you what that looks like.
So I'm going to just do zoom out here.
I'm going to copy this over here so we can work on it.
And we're going to change the columns from six to eight.
Now, that kind of looks skinny, doesn't give us much breathing room and the margin in the gutter,
you can tell we'll play around with red so it's easily visible.
You have four columns on to have the eight column grid, but you can even like if you want to have things
kind of scale off the page a little bit.
And have that as a swiping behavior, you can do that.
Now, the really nice thing you can do on a concrete is have something really large.
And like that, and you can type like that, which is really great.
You know, let's step back, actually, you can just delete this.
OK, so these are fluid levels, once we stretches out like it will give us an indication on if we need
to actually scale up your design, if we need to scale down certain components, like I mentioned before.
But this is where you should probably start if you have to actually build a product or a website based
off of.
All right.
That allows for multiple screens.