Display grid items in the same area

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:

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

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

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

.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 justify-content centers them horizontally.

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

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

.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 series 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!

If you want more helpful content like this, feel free to follow me:

• DEV
• GitHub
• Website