77. Using Grid for Overlapping Elements

Because Grid allows you to place multiple items in the same grid cell, it is an excellent tool for creating deliberate overlaps, backgrounds, and stack effects.

Overlapping Items

If two items are assigned to occupy the exact same space (same start/end lines), they will overlap. Their stacking order is determined by their source order, unless z-index is applied.

Example: Placing an item (.overlay) directly on top of a main content area (.hero-image).

css .container { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }

.hero-image, .overlay { /* Both items occupy the same single cell */ grid-column: 1 / 2; grid-row: 1 / 2; }

.overlay { z-index: 10; /* Ensures the text overlay is on top of the image */ padding: 50px; text-align: center; }

Key Takeaway: Grid positioning makes defining the boundaries for complex overlaps far simpler than using position: absolute which relies heavily on parent context and manual calculation.