Using CSS Grid to Define Page Layout
CSS Grid is a powerful tool for arranging how you want your webpages to be laid out. Here, we are going to use Grid and associated properties to create a basic page layout:
Brand image
Header
Main content of the page
- A key aspect of this layout is the positioning of the footer:
- it comes after the main page content
- it sticks to the bottom of the viewport if the vertical scrollbar is not showing.
The HTML and CSS that will acheive this using CSS Grid are as shown in the CodePen below.
See the Pen CSS Grid for Basic Page Layout by Adam Frost (@adam-frost) on CodePen.