Part $2$ Overall Page Layout

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.