---
title: Use CSS Grid to stack items
author: Victor Cobos
tags: CSS, TailwindCSS, Design
published_at: '2024-03-27T11:53:00+01:00'
updated_at: '2024-07-24T11:26:28+02:00'
canonical_url: https://www.dotruby.com/articles/use-css-grid-to-stack-items
---

# Use CSS Grid to stack items

Discover how to use CSS Grid to stack items efficiently without relying on absolute positioning. This guide explains how to position elements within the same column and row, using both CSS and TailwindCSS, to create flexible and responsive layouts.

Skip `position: absolute;` for overlapping items. Use `display: grid;` and then position them in the same column + row.
🎩✨ Grid respects content size, a neat trick lost with absolute positioning.

<img src="https://github.com/dotruby/dotruby-content/assets/3856862/2488bacf-c5ae-43b3-851f-3d93aef36ef2" width="250px" height="250px" alt="Demo Screenshot">

```html
<div class="grid">
	<div class="item item--1"></div>
	<div class="item item--2"></div>
	<div class="item item--3"></div>
</div>

<style>
	.grid {
		display: grid;
	}

	.item {
		grid-row: 1;
		grid-column: 1;
	}

	.item--1 {
		transform: translate(-2rem, -2rem);
	}

	.item--2 {
		transform: translate(2rem, 2rem);
	}
</style>
```

[Codepen demo](https://codepen.io/elalemanyo/pen/mdgMwVO)

Alternatively, the shorthand method `grid-area` property to achieve the same result with more concise syntax. By setting `grid-area: 1 / 1;` on each item you wish to stack. 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 prefer to use TailwindCSS, that's no problem:

```html
<div class="grid *:col-start-1 *:row-start-1">
	<div class="-translate-x-8 -translate-y-8"></div>
	<div class="translate-x-8 translate-y-8"></div>
	<div></div>
</div>
```

[TailwindCSS demo](https://play.tailwindcss.com/AVT5sy365d)