Overlaying elements with CSS Grid is so much cleaner than with position! 😲

When I searched for ways to overlay content I usually come across the absolute position method, which by the looks of it has been around for a while. And then I learned about CSS Grid and how we can put multiple elements in the same grid area—and they will just lay on top of each other!

CSS Grid overlaying content

This method requires some knowledge of how CSS Grid works and the CSS Grid course by Wes Bos is a great place to start. Wes briefly discusses this method in one of his course videos.

With CSS Grid you can place one or more elements in the same grid area. Elements set to the same grid area will just overlay on top of each other. The following is a step-by-step on how to set this up

1. Add your html elements. Create a container, this will be your 'grid container', and in it add the content element and the overlay element. In this example the container aptly has the class grid-container and we will have the overlay element with class item-grid-overlay and a content element with class item-grid-content. I've put a placeholder image in the content element
   

   <div class="grid-container">
     <div class="item item-grid-content">
       <img src="https://via.placeholder.com/250?text=Image">
     </div>
     <div class="item item-grid-overlay">❤️</div>
   </div>
   

2. Make the grid-container a 'grid container' by giving it the property display: grid. Doing this will automatically make the child elements 'grid items'. This means you do not have to do anything to item-grid-content and item-grid-overlay to make them 'grid items'.
   

   .grid-container {
     display: grid;
   }
   

3. Define a 'grid area' in the grid-container using grid-template-areas. In this example, I create just one grid area called overlaydemo, but the grid-template-areas property enables you to define as many areas as you want. See the documentation for grid-template-areas on MDN web docs
   

   .grid-container {
       width: 250px;
       display: grid;
       grid-template-areas: "overlaydemo";
       /* create one grid area called overlaydemo */
       /* you can give your area a different name */
   }
   

4. Place both of the content and overlay elements in the 'grid area' you defined by setting the grid-area property for each of item-grid-content and item-grid-overlay to grid-area: overlaydemo. Use the same name you defined in .grid-container, but without the quotes. Since item-grid-overlay is after item-grid-content in the HTML it will be on top by default
   

   .item-grid-content {
       grid-area: overlaydemo;
       /* use the same name you defined in the .grid-container */
       /* notice that we don't use quotes */
       }
   
   .item-grid-overlay {
       grid-area: overlaydemo;
       /* place the overlay element in the same grid area as the content element */
       }
   

That's it! For a bare bones basic implementation that's all you need

Example

References

• grid-template-areas
• A Complete Guide to Grid
• CSS Grid