Stacking Items With CSS Grid

Published Mar 3, 2024

Use CSS Grid instead of position absolute to stack items on top of each other.

<div class="stack">
.stack {
  display: grid;
  place-content: center;

  > * {
    grid-area: 1 / 1;

Using the grid-area CSS shorthand property the grid item starts at the first grid line of the grid row (grid-row-start: 1) and the first grid line of the grid column (grid-column-start: 1).

Since the end lines for both rows and columns are not specified, they default to auto, which means the item will span one row, and one column from its starting position.


If you want to support the content you're reading or watching on YouTube consider becoming a patreon starting low as 1$ per month.

Become a patreon
Subscribe For Updates
Found a mistake?

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Edit on GitHub