Overlapping Elements with CSS Grid

Written 2020-10-03

Put the elements inside a CSS Grid container with one column and one row, then force the elements to all be at row 1, column 1.

<style>
  .container {
    display: grid;
    grid-template-rows: 1;
    grid-template-columns: 1;
    place-items: center;
  }
  
  container > * {
    grid-row: 1;
    grid-column: 1;
  }
</style>

<div class="container">
  <div class="text-red-500">ABC</div>
  <div class="text-green-500">DEF</div>
</div>

Usually this will be done in the context of elements that are transitioning in and out on top of each other.

Thanks for reading! If you have any questions or comments, please send me a note on Twitter. And if you enjoyed this, I also have a newsletter where I send out interesting things I read and the occasional nature photo.