Another minimal starting point to achieve a sticky footer using CSS Grid Layout is to use the following CSS:
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}
The number of rows set to grid-template-rows is three (3) so the number of child elements within the <body> node must match this number. (As per the HTML listed in OP's question):
<body>
<header>Header</header>
<main>
<p>Video provides a powerful way to help you prove your point.</p>
</main>
<footer>Footer</footer>
</body>
The original CodePen referenced by the OP uses the same properties in the CSS rule for the <body> element. It adds property settings for .footer but these settings are unnecessary.
As @Ronnie Royston points out in his answer, min-height: 100vh is necessary for the <body> element to stretch to the full size of the viewport of the client browser.
The margin: 0; removes the default margin spacing set by most browsers.
If grid-template-columns is not set CSS Grid Layout defaults to one column so it's unnecessary to set this property in a style rule.
The auto 1fr auto for grid-template-rows sets three rows. The value of auto means that the height of the row will match the size of the content within the element. The value of 1fr means to take up the remaining space for the element between the two rows that have auto applied.
This allows for a header and footer that has a background color applied across the browser window whereas @Henry's Cat adds three columns with the middle column containing the content. As he points out, however, avoid using pixels in any sizing and spacing of Grid Layout elements. Use padding with em/rem or vw/vh units around the content of the header or footer to increase the height of the header and footer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
margin: 0;
}
header {
background-color: #232323;
color: #fff;
}
main {
background-color: #bbdaf1;
}
footer {
background-color: #8badc6;
}
</style>
</head>
<body>
<header>Header</header>
<main>
<p>
Video provides a powerful way to help you prove your point. When you click Online Video, you can paste in the embed code for the video you want to add. You can also type a keyword to search online for the video that best fits your document.
To make your document look professionally produced, Word provides header, footer, cover page, and text box designs that complement each other. For example, you can add a matching cover page, header, and sidebar. Click Insert and then choose the elements you want from the different galleries.
Themes and styles also help keep your document coordinated. When you click Design and choose a new Theme, the pictures, charts, and SmartArt graphics change to match your new theme. When you apply styles, your headings change to match the new theme.
Save time in Word with new buttons that show up where you need them. To change the way a picture fits in your document, click it and a button for layout options appears next to it. When you work on a table, click where you want to add a row or a column, and then click the plus sign.
Reading is easier, too, in the new Reading view. You can collapse parts of the document and focus on the text you want. If you need to stop reading before you reach the end, Word remembers where you left off - even on another device.
</p>
</main>
<footer>Footer</footer>
</body>
</html>
