Css Grid Development Tutorials, Guides & Insights

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

.grid-item {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.item1 {
  background-color: rgba(255, 0, 0, 0.5);
  z-index: 1;
}

.item2 {
  background-color: rgba(0, 0, 255, 0.5);
  z-index: 2;
}

<div class="grid-container">
  <div class="grid-item item1">Layer 1</div>
  <div class="grid-item item2">Layer 2</div>
</div>

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

While CSS Grid is ideal for overall page layout, Flexbox excels at aligning content within grid items.