CSS
Overlapping Grid Items for Layered UI Effects
Discover how to create complex layered user interfaces by making CSS Grid items overlap using explicit grid line placement and `z-index` for depth control.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
position: relative; /* For z-index context */
border: 1px solid #ccc;
width: 300px;
height: 210px; /* Adjusted height for 2 rows + gap */
}
.grid-item {
background-color: lightgreen;
border: 1px solid darkgreen;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.overlay-item {
grid-column: 1 / span 2; /* Spans from column line 1 to 3 */
grid-row: 1 / span 2; /* Spans from row line 1 to 3 */
background-color: rgba(255, 0, 0, 0.7);
z-index: 1; /* Brings item to the front */
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
font-size: 1.2em;
}
How it works: This snippet illustrates how to make grid items overlap by explicitly placing them across multiple grid cells using `grid-column` and `grid-row` properties. The `z-index` property is then used to control the stacking order of these overlapping elements, allowing for sophisticated layered UI designs for components like modals, banners, or interactive elements.