All language subtitles for 3. Grid Overview

The material UI grid system is how we are going to control the layout of the content on our screen as

well as how it responds to different screen sizes the grid system is connected to the media query system

that we are already familiar with and we'll use that to determine what size different elements should

be on different devices the grid system will help provide the spacing and alignment for our elements

while also ensuring consistency.

So let's go over to the material UI documentation page and it will start taking a look at the grid components

and how we can use that to implement our responsive layouts and here we are at the documentation page

under components layout and grid.

Here you can see it says that their grid system adapts to screen size and orientation ensuring consistency

across layouts.

So that is exactly what we want.

And similar to what I had just described and down below it starts talking about how this works using

the CSX flex box module.

So if you are new to flex box or you're unfamiliar with it go ahead and click this link right here.

The CSX Trix flex box guide and this is going to go ahead and give you a really good breakdown of all

the different terms and all of the different features of the CSX flex box.

So go check this out if you don't have a ton of flex box experience but the documentation here for the

material UI component I think covers enough of what we need for this definitely still go and read through

that guide though for more in-depth understanding and keep it handy as a reference point in case you

find that you're forgetting what each property does.

It also says here that there are two types of layout grid components there are containers and items.

So this is important to remember and as we go and build out all of our different grid layouts each grid

component that we make is either going to be a container or an item and you'll see how we can use different

combinations of those to create complex and interesting layouts just like in the media query system

that we've used in the grid system we also have these same five breakpoints they are set to these same

breakpoints as our theme if we continue down you'll see the first example they give is how you can set

the different spacing for your grid items and if you see here each of these little white pieces of paper

they are each a grid item but overall they are all in a grid container.

So if we open this up we'll see that they import a grid component and if we scroll down we can see how

they use that by starting off with a wrapping grid component with a container.

Prop that prop is what determines whether or not each grid is a container or an item.

And you can see that the grid nested inside of that is a grid item.

Now you can only set the spacing on grid containers but you can see that with a spacing prop and passing

it a two or any number between 0 and 10 you can change the amount of spacing between the grid items

within that grid container so if we come up and close this now you can see that here we have a list

of options to change what that number of spacing is for this grid container.

So if we go all the way down to zero you can see the grid items are right next to each other.

And at 10:00 they are spaced very far apart the way that this is actually calculated you can see here

is that the grid system uses an eight pixel square grid baseline.

And so when you provide a spacing of two that's going to take your spacing number times the eight pixel

baseline creating a 16 pixel gap.

So when we set a spacing of 10 it multiplies by our 8 pixel baseline.

Giving us a spacing of 80 pixels so we'll be keeping this in mind to use whenever we need to add some

space between our grid items and if we come down here below you'll see the first example of our basic

grid system using the breakpoints the breakpoints here are set using a number scale that goes up to

12 12.

In this case is the full span of the grid so you can see here that this twelve set grid item is taking

up the entire space available to it below.

We have two more grid items but this time each of them are set to six and since six is half of 12 each

of the grid items is receiving half of the available space and similarly the very bottom ones have a

three set and since three is a quarter of 12.

Each one of the grid items is receiving a quarter of the available space or twenty five percent.

Now you can see that these numbers are being set on the extra small property which means that for all

screen sizes of extra small and above it's going to take up this number of columns.

So 12 being the full size six being half and three being a quarter if we are to scroll down below you

can see the here with the other breakpoints.

Now they're setting multiple breakpoints for these grid items.

So an extra small and above that this grid item will take up the full width available to it.

But on the small screens and above it's only going to take up 50 percent because of the size of 6.

And so that is why both of these grid items are sharing the screen.

However if I come and I start shrinking my screen down you'll see that when we get to a small enough

screen size if I come back down to our basic grid.

So here you see we're still taking up 50 percent of this space available because we're still at this

small.

But once we get down to the extra small size scroll up again.

Moving around you can see now though each of them is taking up the full available space because it is

now applying the twelve column layout which takes up the full size of the screen.

You can see if we adjust this.

Now once it gets bigger they break back down into the size of.

Right here they break back down into the size of 50 percent.

And you can see these smaller ones below.

Also each still taking up a quarter.

But once we shrink back down you'll see a jump.

And now each of these is taking up the full size and each of these is using the six set on the extra

small to receive now 50 percent so let's go ahead and I'll make this big again.

And if we come into view the source code for this you can see they were using a set of the great components

setting with a wrapper of container and then a grid item.

And on our grid items were specifying our different breakpoints so we simply pass in the breakpoint

we want to specify and then the number of columns that we want our component to span at that breakpoint.

And so here you can see the 12 for extra small gives us the full size available but these six set here

make sure that a small size and above it's only receiving 50 percent you could set all of the breakpoints

if you wanted to completely customize the layout for any of the breakpoints.

Now you can also not set the breakpoints at all.

If you don't want your grid layout to change for different screen sizes and you just want a fixed look.

And actually that's what we'll be doing for the footer links that we're going to add we won't really

be needing to move them around or change how they look on the different screen sizes.

But once we start adding some actual content to our Web site with the landing page and then the rest

of the pages we will be using these to determine what size different elements should be at our different

breakpoints.