Overlapping Elements with CSS Grid

Written
  • 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 write about tech thoughts, interesting things I've read, and project updates each Thursday.

You can check out a recent issue, or enter your email below to subscribe.