CSS grid - overlapping header

Hello,

In this video I would like to re-create Jonathan Snook Overlapping header with CSS Grid technique. Please see link to the original post below. This website header is created with CSS grid and :before pseudo-element.

1. We remove default browser margins and set the font as sans-serif

body {
margin:0; /*remove default browser margins*/
font-family: sans-serif;
}

2. We use grid as a container by declaring display: grid on wrapper div. All three direct children - header, main, and footer - become grid items and start to participate in a grid formatting context.

/*We set up the page using three columns and four rows */
.grid {
display: grid;
grid-template-columns: 0 1fr 0;
grid-template-rows: auto 8em 1fr auto;
}

grid-template-columns: 0 1fr 0;
/*left and right columns with zero values are gutters which would collapse on small screens but on screens larger than 600px would become 20px because of 600px media query.) */

grid-template-rows: auto 8em 1fr auto;

/*We define four rows where first and last row is 'auto'. By default, 'auto' takes up any remaining space in the grid container.*/

Note: As we have not placed three direct children - header, main, and footer - on to the grid in any way they will lay out according to the auto-placement rules, one item in each of the first three cells.

3. We use :before pseudo-element to create effect of overlap

.grid:before { /* because we are using :before, it is automatically placed behind other stack layers*/
content: "";
grid-column: 1/-1;
grid-row: 1/3;
background-color: 063;
border: 2px solid blue;
}

4. We place items on the grid using line-based placement

.grid-header {
grid-column: 2 / 3; /*start column line 2 and end column line 3*/
grid-row: 1 / 2; /*start row line 1 and end row line 2*/

color: fff;
background-color:063;
padding: 35px 20px;
}

.grid-main {
grid-column: 2 /3; /*start column line 2 and end column line 3*/
grid-row: 2 / 4; /*start row line 2 and end row line 4*/
min-height: 50vh;
padding: 20px;
border-radius: 10px;
background-color: rgb(240, 236, 236);
}

.grid-footer {
grid-column: 2/3; /*start column line 2 and end column line 3*/
grid-row: -1; /*start with last row line (-1) of the explicit grid, the grid defined by grid-template-columns and grid-template-rows */
color: fff;
background-color: 063;
padding: 20px;
}

5. Center column contains header, body, and footer. Left and right columns are the gutter that collapse on small screens. Pseudo-element and header use same color which creates an effect one bigger header.
Use borders or outlines to see where each element is placed.