In the previous two examples, we only saw how to create columns and size them. The rows got created automatically and their heights were based on the content within. But look at this standard layout, a header, a footer, and a main section with not much content in it. This is a grid with three rows and one column. But why should we use grid in the first place? Because without grid, this is what you get when the main content isn't sufficient enough to push the footer down to the bottom. Let's look at the markup first. We have the header, the section, and the footer directly within body.

Like we learned in the previous episode, since the heights of all these rows together don't add up to the body height, the additional height has been distributed equally among all the rows. So let's change that. The way we use the property grid-template-columns in our previous examples to specify width of the columns. Here we need to use the grid-template-rows property to specify the heights of the rows. The first value is the height of the header. If you wanted to occupy a specific height, like say 100px or 20rem, you can use that or specify auto.

all the leftover space in the container, you can use the fr units. Same is the case with rows too. Now this is it. We have the main content expanding, making sure that the footer is always at the bottom, irrespective of the content here. Let's do this in responsive mode and notice that whatever is the height of the screen, our footer is still at the bottom. And if the screen height is too small like this, a scroll bar appears just like normal flow. Let's go back to the code.

Here's the markup, a nav element with six div elements inside for each of the navigation links. This is what it looks like without grid. Now to the nav element, I have already added a height of 100bh. Now turn this into a grid container, create three columns and two rows. You can pause the video and try it on your own if you wish to. I'll continue. display: grid; grid-template-columns: we need three equal sized columns. So 1fr, 1fr, 1fr. And we need two equal sized rows as well, 1fr, 1fr.

the second row. The first one occupies more height. In this case, we don't want that to happen, which is why we use the grid-template-rows property as well to specify that we need both the rows to occupy the same height. Now we can even combine both these rules into a single one by using the grid-template shorthand property. grid-template. The first value here is the grid-template-rows value, which is repeat(2, 1fr) followed by a slash and then followed by the grid-template-columns value, which is repeat(3, 1fr). Of course, you can use 1fr 1fr also.