Layers
We can layer columns and modules on top of other colums and modules by using grid-area. Just specify the row-start/column-start/row-end/column-end for each child. You can also use z-index if you want to adjust the child stacking order.
Credit to gridbyexample.com for inspiring this example.
[fl_row] {
display:grid;
grid-gap: 10px;
grid-template-columns: repeat(5, 1fr);
}
[fl_row] .a {
grid-area: 1 / 1 / 3 / 3;
}
[fl_row] .b {
grid-area: 1 / 3 / 3 / 5;
z-index:1;
}
[fl_row] .c {
grid-area: 3 / 1 / 5 / 3;
}
[fl_row] .d {
grid-area: 3 / 3 / 5 / 5;
}
[fl_row] .e {
grid-area: 2 / 2 / 4 / 4;
}