You will use CSS grid to create the overall page layout. The page mainly contains three rows and three columns as shown below

Header $($row height:$6$rem$)$

Main $($row height: $1$fr$,$ column width: $80\%)$

Footer $($row height: $3$rem$)$

create $3$ columns and $3$ rows based on the specification given in the picture above $($Hint: Select the body element$)$

select each grid item and place it in the proper grid area, you may either use the grid$-$template$-$areas property to create named grid areas and then assign each area to the corresponding element, or

@ use the line$-$based placement $($grid$-$column and grid$-$row$)$

Save the changes and check in the browser to make sure that all elements are placed in the correct grid area. You may notice that the nav bar overflows the header area. That's okay. We will fix this in Part $4.$

Next, make the header always visible at the top of the viewport even when the page is scrolled. $($Hint: use the position property$)$

Similarly, make the footer always visual at the bottom of the viewport even when the page is scrolled.

Your page should look like the image below after you complete this part: