Layering items
You can layer items in the Grid, using z-index to control the order that they stack. In this example I have boxes arranged on a grid, my box F is last in the source order and positioned on the Grid so it partly overlaps box D.
Without any z-index property it will display on top of box D. However I can add a z-index and control the position which works as you would expect if you have used the z-index property with positioned elements.
Credit to gridbyexample.com for inspiring this example.
[fl_row] {
display:grid;
grid-gap: 10px;
grid-template-columns: repeat(5, [col] 1fr ) ;
grid-template-rows: repeat(3, [row] auto );
}
[fl_row] .a {
grid-column: col / span 2;
grid-row: row ;
}
[fl_row] .b {
grid-column: col 3 / span 3 ;
grid-row: row ;
}
[fl_row] .c {
grid-column: col ;
grid-row: row 2 ;
}
[fl_row] .d {
grid-column: col 2 / span 3 ;
grid-row: row 2 ;
}
[fl_row] .e {
grid-column: col / span 5;
grid-row: row 3;
}
[fl_row] .f {
grid-column: col 3 / span 3;
grid-row: row 2 ;
background-color: rgba(240, 133, 127, 0.75);
z-index: 20;
}