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;
}

A

B

C

E

F

G