CSS
Create Overlapping Design Elements Using CSS Grid
Explore advanced CSS Grid techniques to create visually engaging overlapping elements. Learn to precisely position and stack grid items using `grid-column` and `grid-row` for unique design effects.
.overlapping-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 1rem;
width: 80%;
margin: 2rem auto;
border: 1px solid #eee;
}
.grid-item {
background-color: #a7d9ef;
border: 1px dashed #333;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
font-weight: bold;
}
.item-a {
background-color: #e0f2f7;
grid-column: 1 / 3;
grid-row: 1 / 3;
z-index: 2;
}
.item-b {
background-color: #d1ecf1;
grid-column: 2 / 5;
grid-row: 2 / 4;
z-index: 1;
transform: rotate(-3deg);
}
.item-c {
background-color: #b3e0ed;
grid-column: 3 / 4;
grid-row: 1 / 2;
}
/* HTML Structure for context:
<div class="overlapping-grid">
<div class="grid-item item-a">Item A</div>
<div class="grid-item item-b">Item B</div>
<div class="grid-item item-c">Item C</div>
<div class="grid-item">Item D</div>
<div class="grid-item">Item E</div>
</div>
*/
How it works: This snippet demonstrates how CSS Grid can be used to create overlapping elements. By explicitly defining `grid-column` and `grid-row` start/end lines for specific items, they can be made to span across cells and visually overlap. The `z-index` property is then used to control the stacking order of these overlapping items, allowing for complex and creative layered designs that are difficult to achieve with traditional layout methods.