Overlapping Elements with CSS Grid

Written — Updated
  • 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.