Implicit named grid lines
When using Named Areas implicit named lines are created by appending -start and -end to the named area you have defined. They can be used in the same way as lines you have explicitly named.
Credit to gridbyexample.com for inspiring this example.
[fl_row] {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:
"header header header"
"sidebar content content";
}
[fl_row] .sidebar {
grid-area: sidebar;
}
[fl_row] .content {
grid-area: content;
}
[fl_row] .header {
grid-area: header;
}
[fl_row] .overlay {
z-index: 10;
grid-column: content-start / content-end;
grid-row: header-start / content-end;
opacity: 80%; /*so you can see behind it*/
}