Nested Grid
A simple example of nesting one grid inside another. Any Grid Area can become a grid itself, by setting display:grid and then defining the rows and columns.
Credit to gridbyexample.com for inspiring this example.
Row Settings
[fl_row] {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, [col] 1fr ) ;
grid-template-rows: repeat(2, [row] auto );
}
[fl_row] .a {
grid-column: col / span 2;
grid-row: row;
}
[fl_row] .b {
grid-column: col 3 / span 2;
grid-row: row;
}
[fl_row] .c {
grid-column: col / span 2;
grid-row: row 2;
}
[fl_row] .d {
grid-column: col 3 / span 2;
grid-row: row 2;
}Column D Settings
[fl_col] {
display: grid;
grid-column: col 3 / span 2;
grid-row: row 2;
grid-gap: 10px;
grid-template-columns: 1fr 1fr;
}
[fl_col] .e {
grid-column: 1 / 3;
grid-row: 1;
}
[fl_col] .f {
grid-column: 1;
grid-row: 2;
}
[fl_col] .g {
grid-column: 2;
grid-row: 2;
}