Overlaying elements with CSS Grid is so much cleaner than with position! 😲
Tags: css, cssgrid
Published: 2020-08-21 18:11:22

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](https://stackoverflow.com/a/2027678/14087332). 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](https://cssgrid.io/) 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

    ```html
    <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'.

    ```css
    .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](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)

    ```css
    .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

    ```css
    .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

{% codepen https://codepen.io/nhuynh1/pen/ExVZzYp %}

###References
* [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
* [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
* [CSS Grid](https://cssgrid.io/)