CSS
Overlapping Grid Items in CSS Grid Layout
Discover how to precisely place multiple grid items into the same or overlapping grid cells using CSS Grid. Utilize `grid-column`, `grid-row`, and `z-index` to create complex layered designs and unique visual effects.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
border: 1px solid #ccc;
padding: 10px;
position: relative; /* For z-index to work reliably */
}
.item-main {
grid-column: 1 / 3; /* Spans column 1 and 2 */
grid-row: 1 / 2; /* Spans row 1 */
background-color: #a0c4ff;
z-index: 1;
}
.item-overlap {
grid-column: 2 / 4; /* Starts in column 2, overlaps item-main */
grid-row: 1 / 3; /* Spans row 1 and 2 */
background-color: #bdb2ff;
z-index: 2; /* Appears on top of item-main */
opacity: 0.8;
}
.item-back {
grid-column: 1 / 2;
grid-row: 2 / 3;
background-color: #ffc6ff;
z-index: 0;
}
How it works: CSS Grid enables robust item overlapping by allowing multiple grid items to occupy the same grid cell or span across intersecting cells. By explicitly defining item placement with `grid-column` and `grid-row` properties and managing their stacking context using `z-index`, developers can achieve intricate layered layouts and sophisticated visual compositions.