Layering items Grid auto-placement

You can absolutely position items inside an area of the Grid. In this example, I have used position: relative on my .content Grid Area. I can then position the four arrow images using absolute positioning inside that area, and it works as you would expect.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr  1fr  1fr;
    grid-template-areas:
    "header header  header"
    "sidebar content content"
    "footer  footer  footer";
}
[fl_row] .header {
    grid-area: header;
}
[fl_row] .sidebar {
    grid-area: sidebar;
}
[fl_row] .footer {
    grid-area: footer;
}
[fl_row] .content {
    grid-area: content;
}
[fl_row] .content {
    position: relative;
}
[fl_row] .topleft {
    position: absolute;
    top: 0;
    left: 0;
}
[fl_row] .topright {
    position: absolute;
    top: 0;
    right: 0;
}
[fl_row] .bottomleft {
    position: absolute;
    bottom: 0;
    left: 0;
}
[fl_row] .bottomright {
    position: absolute;
    bottom: 0;
    right: 0;
}

Header

Sidebar

Footer

Content

The four arrows are icon modules that are position: absolute; inside this position: relative; div.