Display grid items in the same area

Written byPhuoc Nguyen

Created

30 Dec, 2023

Here's what we'll cover:

Discover how to layer grid items using the `grid-area` property.

In the previous post, we introduced the `grid-template-areas` and `grid-area` properties and showed how to use them to create a common layout known as the holy grail layout. We defined areas in the grid using `grid-template-areas` and positioned items within those areas using `grid-area`.

Typically, items are displayed in different areas in the grid, each with its own `grid-area` values. However, in this post, we'll explore a special technique where all items are displayed in the same area. This cool technique can be used to achieve real-world examples. Let's dive in!

#Layering elements with absolute positioning

There are times when we want to display an element on top of others, such as when we need to show a loading indicator on top of an element. In this case, the indicator is positioned in the center of an overlay that blocks users from interacting with the underlying elements.

Before diving into the technique of using CSS grid, let's first explore a common approach to achieve this layout.

Here's a simple markup of the layout:

html

<div class="container">
  <div class="container__content">...</div>

    <div class="container__overlay">
        <div class="container__loading"></div>
    </div>
</div>

The HTML structure above is pretty simple. It has two child elements of the parent container. The first child element, with a class of `container__content`, is the main content of the layout. The second child element, with a class of `container__overlay`, is an overlay that appears on top of the main content. Inside this overlay, there's another child element, with a class of `container__loading`, which is a loading indicator that sits in the center of the overlay.

The `container` class has a `position: relative;` property because we want to position the overlay, which is a child of the container, relative to the container itself.

css

.container {
    position: relative;
}

On the other hand, the `container__overlay` class has a `position: absolute;` property. This allows us to position it anywhere within its parent container using the `top`, `left`, `right`, and `bottom` properties. In our case, we set both `top` and `left` properties to 0, which means it will start from the top-left corner of its parent container.

To ensure that the overlay covers the whole content area, we set its `height` and `width` to 100%. By default, an absolutely positioned element only takes up as much space as it needs. However, by setting these values to 100%, we make sure that it expands to cover its entire parent container.

css

.container__overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

To make the overlay more noticeable, we can add a background color to it. In this example, we added a semi-transparent black background using the `background-color` property. This creates the illusion that the content behind the overlay is dimmed or disabled while the loading indicator is displayed on top of it.

You can adjust the opacity of this color to make it darker or lighter. The first three values in `rgb()` represent red, green, and blue respectively, while the fourth value represents opacity (a value between 0 and 1). By setting the alpha channel to a lower value, we get a semi-transparent effect that allows some of the content behind the overlay to show through.

css

.container__overlay {
    background-color: rgb(75 85 99 / 0.7);
}

To display the loading indicator at the center of the overlay, we can use flexbox properties. We'll use `align-items` and `justify-content` properties on the `container__overlay` class. This will make the container a flex container, allowing us to position the loading indicator in the center.

Setting both `align-items` and `justify-content` to `center` will place our loading indicator right in the center of the overlay. This is because `align-items` centers items vertically, while j`ustify-content` centers them horizontally.

css

.container__overlay {
    align-items: center;
    display: flex;
    justify-content: center;
}

Let's see how the layout looks with this approach:

We're skipping the implementation of the loading spinner for now. If you're interested in learning how to create it using CSS, check out this page for a full walkthrough.

#Layering elements made simple with CSS grid areas

Using absolute positioning is a traditional approach that's been around for years. It's useful when you need to position an element anywhere on the page, even on top of other elements. However, it can be tough to use for complex layouts because you have to manually set the `top`, `left`, `right`, and `bottom` properties.

But with CSS grid, achieving a layered layout has never been easier. Instead of using absolute positioning, we can use CSS grid to display content and overlay in the same area. This technique involves creating a single grid area and positioning both the content and overlay within that area using the `grid-area` property.

To get started, we simply turn the container into a grid by setting the `display` property to `grid`. Then, define a single grid area called `layer` using the `grid-template-areas` property.

css

.container {
    display: grid;
    grid-template-areas: "layer";
}

To position both the content and overlay in a single grid area, we simply set their `grid-area` property to `layer`.

css

.container__content,
.container__overlay {
    grid-area: layer;
}

By using CSS grid, you can efficiently layer elements without creating extra HTML markup or relying on complex CSS positioning techniques. This allows both elements to be displayed in the same area of the grid.

Check out the demo below to see it in action!

We can use this technique to achieve similar layouts, such as featuring a video in the background of a hero section.

#Conclusion

To sum up, displaying multiple items in one area is an efficient way to create complex layouts without relying on extra HTML markup or complicated CSS positioning techniques. CSS grid's `grid-area` feature allows us to display several elements within one cell, simplifying our code and producing stunning layouts.

By mastering how to layer grid items, you can create an array of designs without depending on absolute positioning or complicated HTML structures.

#See also

Loading spinner

If you found this post helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

Create a holy grail layout←

Center align the main content and left align the sidebar→

Questions? 🙋

Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.

While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.

Ask me questions

Newsletter 🔔

If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.

By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.

Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn