CSS
Overlay Elements Using CSS Grid Placement
Discover how to easily overlap and layer elements within a CSS Grid container by explicitly defining their `grid-column` and `grid-row` positions for creative designs.
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 100px); /* Example row heights */
width: 300px;
height: 200px;
border: 2px solid #007bff;
}
.item-a {
background-color: rgba(255, 0, 0, 0.7);
grid-column: 1 / 3; /* Spans across all columns */
grid-row: 1 / 3; /* Spans across all rows */
}
.item-b {
background-color: rgba(0, 123, 255, 0.7);
grid-column: 2 / 3; /* Starts at column 2, ends at 3 */
grid-row: 2 / 3; /* Starts at row 2, ends at 3 */
z-index: 1; /* Brings item-b to the front */
}
How it works: The container is set to `display: grid`. By explicitly defining `grid-column` and `grid-row` values, items can be positioned to occupy the same grid cells, causing them to overlap. `z-index` can then be used on the overlapping items to control their stacking order, bringing desired elements to the foreground.