CSS Grid Course: Justify Items and Align Items

heyyyyyy in this screencast I'll teach you how to justify and align the items on the grid so here we have our classic website layout it contains 12 columns in the width each are one fraction unit and three rows where the second one is auto so this grid is responsive in both width and height as you can see we have defined the width of each of the items using the grid column value so for the header for example we're saying start at the first column line which is this one and end at the last one which is this one over on the right-hand side so it's kind of stretching from the start point to the end point and this axis here the row axis is the one you control with justification so if we do or if we do justify items that'll be by defaults that good stretch however if we for example want each of the items to rather Center itself as much as possible and not stretch all the way from the left-hand side to the right-hand side we can use Center now as you can see now each of the items are centered at as much as possible you can also use part that'll squeeze all of them towards the left-hand side and end is the opposite of this that'll squeeze all the items to the right-hand side now let's comment out this a little bit and use the line items property that'll do the same thing though along the column axis so the vertical axis from top to bottom so if we do Center here you can see that each of the items are now squeezed together towards the center though not only left to right row axis but on the top to bottom column axis we can do and that'll squeeze all them to the bottom or start that'll squeeze them works the top now let's do the center again and bind this with center here now all the items just a tiny rectangle in the center of the grid cells which had originally occupied fully now I have no idea why I would want to create a website layout like this it's really weird but that's besides the point of this screencast finally let's finally let's comment out these cute get back to the original layout and look at how you can do the same thing though only targeting one of the items let's head into the content for example then you can use justify itself a new center now only the content is centered a line office well and and now the content is squeezed down to this tiny little box in the bottom center of the huge space it originally occupied a little bit sad actually to see the content to see the contents being turned into a shadow of itself like that so let's give it back its original space like that ok so that's it I hope you learned something and feel free to play around with this yourself thank you