Css Grid: Stacking elements

Follow me on Youtube

Stacked elements

What do you mean by "stacked elements"!? Well, as you can see in the image below i use this term for elements that are stacked in z space! Like Photoshop layers as you will! In this case the layers are the image, the gradient and then the text.

In this article/video i want to show you an elegant way of stacking these elements! But instead of using floats or position absolute we are going to use the power of css grid.

Lets have a look at this html snippet.

<div class="card stack">
    <div class="img"></div>
    <div class="gradient"></div>
    <div class="title">
        <h2>Lorem ipsum dolor sit amet.</h2>
    </div>
</div>

Here we have a card "component" that has three (div) children. One to hold an image, on for a gradient and one for the text that should be placed over the image.

Also notice that the card element has an extra class of "stack". We are going to use this class to create a small reusable utility.

So lets add the css for that.

.stack {
    display: grid;
}

This turns our stack element into an actual grid that is one row high and one column wide. An important concept here is that even though our grid now has only one "cell" it has 4 grid lines like shown in the image below.

Here you can see that our grid has a grid line for the left, top, right and bottom side. We can place grid items in between these grid lines by giving them a css grid-area property.

.stack > * {
  grid-area: <left> / <top> / <right> / <bottom>;
}

To place our "layers" we have to tell the grid item between which grid lines it should place itself by giving it a grid-area property and giving it the four grid line numbers. The example above shows you what the order of these values should be.

.stack > * {
  grid-area: 1 / 1 / 2 / 2;
}

With the code above we tell all the child elements to place them self between the first en second horizontal grid lines, and between the first en second vertical grid lines.

Because we place them at the same location in the grid, they will be placed perfectly on top on one another.

We can shorten the grid-area value by only giving it the starting grid lines. Grid will assume that we only want to cover the adjacent grid cell.

.stack > * {
  grid-area: 1 / 1;
}

Pushing the text to the bottom.

In the example layout the text is positioned at the bottom of the image. for this task we can use grid's align-self

.card .title {
    align-self: end;
}

Here we added the align-self property with a value of end to the title div, which will push anything inside this element to the bottom.

Subscribe to my Youtube channel
Buy me a coffee
Come chat on Twitter
And follow me here for more articles

Thanks for your precious time, and have an awesome day!