Original subtitles

Let's keep scrolling down here and they give us a really nice interactive demo here where you can see

the different properties coming from flex box that we can use to arrange and configure the layout of

our grid.

So here you can see that these are a grid with the container prop a direction of row a justified prop

and then a line items prop.

So we'll start with that direction prop so a direction of row means that they are laid out horizontally.

So one two and three in a row.

So left to right.

And that is actually the default direction.

If you do not set one you can also set row reverse which as you can see puts the items in the reverse

order while still being laid out horizontally.

But this time right to left so the opposite of row direction then is the column direction here.

Now you see that the grid items within our grid container are being laid out vertically from top to

bottom and we also have a column reverse which again flips are grid items now being displayed from bottom

to top.

We'll use the direction often and by nesting it and then changing different containers to have different

directions.

You're able to really create just about any kind of layout.

And I think that as we continue to build more of our content and see how this works you'll really get

a second nature of understanding how different layouts will map to different grids with the different

directions we need to be able to change more than just the direction though because our grid system

needs to be able to control content anywhere on the page so to move it around once we have it going

the right direction.

That is where we will use our justify and a line items properties to justify.

Property is going to align our items across the main axis of the grid.

So to explain the main axis.

Let's go back to our direction of row.

And here I said the it's displayed horizontally from left to right.

And so the main axis for our direction of row is horizontal.

And then what's called the cross axis would be the up and down the vertical direction so since we are

in a direction of row and our main axis is going to be the horizontal direction that means are justified

property is going through our line our items across horizontal space.

So if we cook the Flex start that should move all of our items over to the left side of the page and

you can see that that indeed happens to get our items all the way to the end on the right side of the

page.

We can use the Flex end property and if we want to evenly distribute the space between all of our different

items you can see the space between option and this space around is similar but instead of putting all

of the space in between our items it's also going to add space around on the sides of all of them.

So now you can see that those first and third grid items are moved in because now there's space around

them but you can see that there's more space on the inside of these items here than there are on the

outside.

And if you want to evenly distribute that across all of the area you can select space evenly and now

you can see a much more consistent spacing.

Let's go back to center though and now let's change our direction to column so now like I said since

the justify property controls the main axis the main axis for our column direction is up and down is

the vertical direction so now if we choose the flex a start that should push our items to the beginning

of the vertical direction which should be at the top.

So if we select like this you can see it moved up a little bit there.

It's a little hard to see because there's not a ton of vertical spacing here.

But if we select the Flex and you can see that now move all the way to the bottom and space between

distributes more spacing between our elements a space around does the same thing.

And the space evenly distributed as well.

I think that it's not completely adding the space down here because of the way that they have the items

being displayed but that's just for their example and you can see that it's still altering the spacing

for our main axis which is the vertical direction.

In this case let's go ahead and change our direction back to row and our justify back to center.

And now let's take a look at the line items property which distributes our items along the cross axis.

So the opposite direction of our main axis.

So for a row our main axis is the horizontal direction.

And so our cross axis would be the vertical up and down direction.

So our own line items if we selected flex start should push all of the items to the beginning of the

Cross axis which would be the vertical direction.

So that should push everything up to the top.

And if we select our Flex start for line items you can see that that indeed happens and we can also

push everything to the bottom of our cross axis.

So at the bottom of the vertical direction with Flex end and we can also stretch those out to fill up

the entire available space to us as well the baseline property aligns all of the text within your items

to a common baseline.

But let's go ahead and set our line items back to center and let's check it out now on column so with

a direction of column our main axis is now the vertical direction which means our cross axis is now

the horizontal direction.

So now if we change are a line items properties if we select the Flex start value it should move all

of our items to the beginning of the Cross axis which we just said is the horizontal direction.

And so setting the Flex start for our line items should push all of the items over to the left.

So if we select flex start we can see that indeed happens.

And again the Flex end will move all of our items to the end of the Cross axis which in a direction

of column is our horizontal direction.

So you do have to kind of remember that the justify and the line items properties they aren't always

setting one direction or another they're distributing your items along a certain axis and that axis

depends on your grid direction definitely spend some time playing around with this demo and I feel like

you'll really get a good idea of how this is working and how we can use these properties to consistently

layout our content but as we get some practice with that in our application I think it's really going

to become clear to you guys we can keep scrolling down and here it actually shows how you can set a

value of auto to your breakpoints so these grid items instead of setting an explicit value they're simply

setting a value of auto which will make all of the items equally share the available space.

They also gave an example in this bottom row how you can then set one of the items explicitly and the

other items which are set to auto will then resize around that you can see the code for this they are

simply just specifying the breakpoint property that control the smallest they want the grid item to

be which then automatically creates the consistent layouts using the auto property is a good place to

get started and see how your content is resizing where you can then go and set different values for

all your different breakpoints they give us an example here of how you can use the grid to create very

complex layouts that feel very consistent and aligned all very easily using the grid component.

You can also combine the container and the item properties which you can see here where they add both

the down here both of the container and the item properties.

Since this grid item is not only an item of the main container but is also a container with a another

component inside of it which in this case is coming up here from their other set of grids.

This is similar to what we will be using for our footer links and how we will be arranging those.

So we're actually going to go and take another look at our footer and how it's going to relate to this

grid system.

Before we go and actually try to implement because I know that this might still seem pretty abstract

right now but I promise once we get in and actually start building with it it will become a lot clearer

how this is all going to work together to create any kind of layout.

All right.

So let's come over and here you see the copy of our footer but I've added a couple of extra things so

you can see the the footer links are covered with an opaque box and that box is representing the outermost

grid container the arrow below the box represents the grid direction which in this case is going to

be row.

So that is the horizontal direction we can see starting with the home and then these services column

the revolution column the about us column and then contact us column that all of these are progressing

from left to right.

And that is why our outer container will have a direction of row which is the default so we'll start

out with that one big wrapping container and then inside of that container you can see now on this page

that each of the columns is going to be a container as well these containers however are moving from

the top to bottom and so they are going to have a direction of column so you can see for example on

the services section that we're starting at the top with services custom software development IOW an

Android app development and website development moving from the top down.

So that is a column layout then inside of our columns we're left with each of the individual grid items

and that will be our individual links.

And so those will be just holding the text and then we'll make those react router links but all of those

individual grid items are wrapped then by each of the column containers which are then all wrapped by

our one main row container.

So I hope that this makes a little more sense of how we're going to use those two different grid components

the container and the items to create a nested structure which controls the overall display of each

individual item.

So like I said it will start to make a lot more sense once we actually just start building it and seeing

the code and how it all starts to work together on the screen.

So let's just go ahead and start jumping into working on this in the next video.