CSS
CSS Grid: Overlapping Elements for Layered Designs
Discover how to precisely position and overlap elements using CSS Grid's `grid-area`, `grid-row`, and `grid-column` properties for complex, layered UI designs.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 300px;
height: 300px;
position: relative; /* For z-index to work reliably */
}
.item-background {
grid-area: 1 / 1 / 3 / 3; /* Spans all cells */
background-color: lightblue;
z-index: 1;
}
.item-overlay {
grid-area: 1 / 1 / 3 / 3; /* Spans all cells, overlaps background */
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
color: darkblue;
z-index: 2;
}
How it works: CSS Grid allows items to occupy the same grid cells, enabling powerful overlapping effects. By assigning multiple items to the same `grid-area` (or `grid-row`/`grid-column` lines), they stack on top of each other. The `z-index` property then controls their vertical stacking order within the grid container.