All language subtitles for 5. Using Grids - Setup

Now that we know about the material UI grid components and how we can use the container and item properties

along with the justifying direction and the line items properties to control the layout of our contents

let's go ahead then and start setting up a basic grid for ourselves to align all of our links in the

footer so we can start by coming up to the top of our footer.

J.S. and importing the grid from app material dash UI slash core slash grid will then come down and

inside of our footer but above the image let's create a grid components and then open that up like that.

We know that there are two kinds of grids the containers and the items and this outside wrapping grid

is going to need to be a container container.

So put the container prop on there and then on the inside we can have a grid item with the text home

inside.

So if we save this we'll now see in our footer the text home is now appearing above our little black

slash this definitely doesn't look ideal though because instead of sitting above the Black flash we'd

really like for it to just be sitting directly on top of it.

To do this let's go over to our grid container and add a class name of classes classes.

The main container which means we need to come up and add a main container style here and we'll just

set the position to absolute.

And that way we'll be able to move the links in the footer around regardless of any of the other elements.

Let's go ahead and save that and we'll see the page refresh and our text now looks like it's gone but

it's actually still here just being hidden underneath the little Slash.

So it's sitting on top of it like we had wanted but we just need to actually make sure that the text

is visible.

So let's go in on our grid item.

Let's add a class name equal equal to classes dot link and then we can go up and add a link style and

we'll just go ahead and put in all of the footer link styles real quick.

So we'll start with a color of white a font family of Ariel Ariel Ariel and a font size of zero point

seven five REM.

And finally a font weight set to just bold.

Let's go ahead and save that.

We'll see the page refresh.

And now we've got a much nicer looking little home text down there.

We know however that this home text shouldn't be pressed all the way against the edge of the screen

right there.

But we actually want it more in the center horizontally of this footer.

Now we had talked about how we can use the justify and a line items properties to control the layout

of our content but we need to figure out which one of those to use in this situation.

We know that the justify property controls the main axis and the align items property controls the cross

axis of our container.

And if we look at the container that we have here our main container is not specifying a direction which

means that it's on the default direction of row when you're in a direction of row the cross axis is

your vertical up and down axis.

But the main axis is your horizontal left and right direction now we just said that we want to censor

our footer links horizontally on the footer and so that means we need to be styling the main axis for

this container.

And we just said that the.

Justify property controls our main access.

So let's go ahead and add a justify of a center onto our grid container.

So let's go ahead and save this and we'll now see that our home text appears in the middle of the footer.

So let's go and start adding the rest of our footer links now and to do this we'll actually refactor

this first one just a little bit.

So let's cut this class name off of this grid item and instead of just having the home in there let's

create another grid container as the first item in here with a direction.

Now set to column K.

So we'll put that in there and then the first grid item within this new container will have our home

text and so on this item we can now paste our classes dot link setting it up like this will make it

consistent with the rest of the items that you'll see in just a second.

So let's go now and here underneath this grid I don't.

So this whole grid item will create a second grid item.

This one also containing a grid container also with a direction equal to column.

So now the grid items within this container are going to be stacked from top to bottom because we have

set the direction equals column property.

So instead of continuing to lay these out left to right these will all be stacked on top of one another.

So we can go ahead and create a grid item and here this will be our services page and let's go ahead

and paste on that class name of link onto there and then let's copy this entire grid item actually and

paste that three more times underneath will then change services to custom software developments mobile

mobile app developments and Web site developments if you remember from our footer that is our whole

little column right there.

And so then we'll go outside of this and create a another grid item with a grid container inside and

let's also remember to set the direction to column here and inside of this column container we'll set

our grid item to first be the revolution page and remember to get that class name of classes and link

on there and then we'll paste that couple more times for our vision technology and paste that one more

time for our process let's keep going and we'll create another grid item with a grid container with

a direction of column inside and inside of there a grid item.

This time with about us and make sure we get the class name classes dot link and then this time for

history and for team finally that leaves are very last grid item with a grid container vague directions

sets to column in inside of here just one single grid item with contact us inside.

So you can see that we really are going to be alternating between our grid items containers and items

to lay out and align all of the content on the screen.

However we would like and then it's going to make sure that it's all consistent and aligned for us really

making a nice layout.

So let's go ahead and save this and see how that looks and it looks like we actually have a little bit

of a problem.

The contact us item looks like we didn't get that in exactly the right spot we were still inside that

grid item.

So make sure you come all the way out.

So there's only one grid tag underneath and then we'll paste it that grid item with the grid container

with our contact us item inside.

So let's save this again.

And now we'll see the page refresh and you can see our home link and then these services column and

then the revolution column the about us column and then the contact us column even though it only has

one row and you can really see now how we're laying these out from left to right for our biggest container.

And then inside of each of these items is another container now laid out top to bottom we did obviously

forget our class name for the contact us right there.

So on this grid item item add the class name of classes dot link and we'll save that.

And now it looks like everything is styled correctly I definitely don't like though how all of those

links are squished together.

That's obviously not the work that I designed or that the look that anyone would want.

And so let's go ahead and add some spacing to this.