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

A

B

C

D

E

F