‫Next up, let's use CSS grid
‫in order to build or over a layout.
‫And we will then also improve
‫that layout using some additional Tailwind classes.
‫So basically what we want to do is to set up a grid
‫which contains three rows for the layout.
‫So one row here for the header, one for this content,
‫and one for this card overview.
‫The goal of that is
‫that we can then easily push this overview here all the way
‫to the bottom of the screen.
‫So, let's come here to our app layout.
‫And so here, let's now remove this class name of layout
‫which no longer exists in our CSS.
‫And then let's make this the grid container.
‫So similar to Flexbox, in order to make a grid container
‫we just use the grid class.
‫Now if we give this a safe
‫nothing really special will happen.
‫And so let's also define some rows and some columns here.
‫So first, just for experimenting
‫and then once we know how grid works,
‫we will really build our final layout with it.
‫Now, first of all, we should also give this here a height.
‫So let's say height,
‫which is just this h.
‫And then here as always, we can define some value.
‫So let's say like 40,
‫which would look like this.
‫Well, we can't really see that.
‫So let's give it a background color.
‫So BG, red, for example,
‫this one here and beautiful.
‫So let's make this here a lot bigger.
‫And I don't know how big this actually can get.
‫So for some reason sometimes we lose the auto complete here.
‫Maybe 128 works.
‫Well, let's see.
‫So that's why we have the documentation.
‫So height.
‫So let's see all the classes.
‫So the tallest one is apparently 96.
‫So, just for the fun of it
‫let's actually define our own value like we did earlier
‫and let's set it to 600 pixels.
‫And so now we start seeing at least something,
‫maybe 400 or 500
‫and yeah.
‫So we start seeing now
‫that this is actually already a grid,
‫because by default it is stretching these three rows here
‫automatically to the size of the content.
‫And so let's now explicitly define some grid rows here.
‫And we do that simply with the grid row
‫and then the number of rows that we want, class name.
‫And so you see that nothing really changed
‫because they still have the size of their content itself.
‫So just for the fun of it,
‫let's say grit row
‫or grit call 2.
‫And with this we would create two columns,
‫which also for some reason are not appearing.
‫So maybe that's calls, yeah, just like this.
‫Now we could also define a gap.
‫And so here again, any value would work.
‫And so then we get this gap here between,
‫which we cannot really see because of that background,
‫but it's really also not important.
‫So we could also have it just horizontally
‫or just vertically by writing gaps
‫or gap x 4.
‫And so then it's only here between these two
‫or we could use gap y,
‫and then it's only here.
‫Okay.
‫But this is really just for experimentation.
‫So let's get rid of this,
‫but we do actually want to create our own rows.
‫Now the problem with this
‫is that it will create three rows of the exact same size.
‫Well, here it should be actually grid rows.
‫So the nice trick of seeing
‫if the class name works or not is to hover it.
‫And if we then get some coat here
‫that means that the class actually exists.
‫And so now indeed
‫the three rows here have the exact same size,
‫which is really not what we want.
‫Instead, what we want is
‫or can be visible actually right here,
‫which is to have two rows like this.
‫So the first one should be just the size of the content,
‫the last one as well.
‫And then the one in the middle
‫should fill all the other remaining space.
‫And so, let's go ahead and do that.
‫So the way we can do this is to again use square brackets
‫to define our own custom column right here.
‫So again, kind of as an escape patch from Tailwind.
‫And so here we can say auto,
‫then we need this underscore,
‫then one fr and then auto again.
‫And so once again, I'm assuming
‫that you know exactly how CSS grid works.
‫And so this, for example
‫one fr unit should make sense to you.
‫So if we give this a safe now
‫then we get exactly what we were looking for.
‫Now to finish, let's just get rid of this one here.
‫And instead of specifying a special value,
‫we can use h-screen.
‫And so this will then give it basically the entire height
‫of the view port,
‫which is equivalent to setting the height
‫to 100 viewport height units.
‫So this is one of the special values that we have here.
‫So h-screen, h-min, max.
‫We also have h-full for height 100%.
‫But here we are really looking for this one.
‫If you wanted some percentages
‫you could then use this one here.
‫For example, for width 50%, you would use this one.
‫And yeah.
‫As always, you can just check out
‫this documentation if you need it.
‫So now we can finally get rid of this.
‫But here I forgot the square bracket.
‫Well, this is not correct
‫because I placed the h-screen here inside.
‫Yeah, now that's great.
‫But watch what happens if the page was really small.
‫So then here we would have to scroll,
‫which is really not what we want.
‫So what we need to do
‫is to set the scroll behavior to scroll here
‫on this main element.
‫So again, that's pretty standard CSS,
‫but with Tailwind all we have to do is to define
‫or to use the classier of overflow scroll.
‫So what this does is exactly what we have here.
‫So it sets the overflow property to scroll,
‫making it so that if there is not enough space
‫to display the content,
‫it will then force us to scroll.
‫All right.
‫Now next up, let's go here to the new order page.
‫So, order new.
‫And then here we see that we have all this content here
‫in this left side of the page.
‫So usually what we do most of the time when we design a page
‫or an app is to center somehow the content.
‫So center it in the middle of the view port.
‫And so let's also learn how to do that.
‫So for that,
‫we first of all need to give the container a certain width.
‫And so let's do that with width.
‫And then something here.
‫And then again, I will give it a background color
‫like this.
‫And so we see that this 20 is really not enough,
‫but actually we don't even want a width,
‫but we want a max width.
‫So in these situations where we want a fluid design
‫we should always use max width.
‫And so here actually they look a bit different.
‫So here we have max W
‫and then instead of the normal values,
‫we again get small, extra small, medium, large,
‫and then all these other ones.
‫Alright, so let's now use max width
‫and then let's say 3XL.
‫All right.
‫So let's maybe see this in this view.
‫So at just 50%.
‫And so notice how then at some point
‫we get all this white space there at the right side
‫where you actually want this
‫so this red part here to now be centered in this view port.
‫So distributing this white space basically equally
‫between the left and the right side.
‫So, the way we do that with CSS
‫is to add margin left and margin right auto.
‫So again, hopefully you already know about that trick.
‫And so let's now use that here with Tailwind.
‫So all we have to do is margin on the X site,
‫so left and right and then set it to auto.
‫And with this, more content is nicely centered
‫and it clearly doesn't have this width
‫that we defined right here.
‫But the reason for that is that this is now a grid item.
‫So this is just how it works with CSS grid.
‫So one way around this
‫is that we can wrap this into another div
‫like this,
‫and then we got that fixed.
‫The only thing that we need to do
‫is to then make this element actually with overflow scroll.
‫So let's grab that.
‫And there we go.
‫So now the scroll bar
‫is nicely appearing here on the right side,
‫and everything works nicely.
‫All right.
‫So let's remove this from here.
‫And beautiful.
‫Now we could also add the margin
‫that we have in the homepage,
‫so here at the top and at the bottom.
‫So, let's do that here maybe.
‫So we could do margin y and set it to 10 again.
‫And so that would then create some nice spacing.
‫But actually I want different spacing here
‫at the top of the page for different pages.
‫And therefore, let's define this margin here individually
‫for each page and not here on this wrapper,
‫so here in this layout.
‫So basically all the styles that we defining right here
‫will apply to all the pages
‫because the pages are rendered here in this outlet
‫and therefore here inside these elements.
‫But of course,
‫we can also set individual styles on the page level
‫simply by adding some styles,
‫well, to the components that make up these different pages.
‫So let's revert it back to what we had.
‫And with this, we finished the lecture on CSS grid.
‫And as always
‫make sure to check out the documentation here
‫to learn everything that you need to know.
‫But for now, let's move on to our next topic.