Pile

.pile Layout

What it does

The .pile class creates a layout where all direct child elements are stacked on top of each other, perfectly centered both vertically and horizontally.

• Uses CSS Grid with a single grid area named "pile".
• All direct children are assigned to the same grid area, causing them to overlap (pile up) in the center.

How to use

1. Add the class to a container:

   <div class="pile">
     <img src="image1.png" alt="Image 1">
     <img src="image2.png" alt="Image 2">
     <span>Overlay Text</span>
   </div>
   

2. Result:
   All child elements will be perfectly centered and overlap each other within the container.

Typical use cases

• Creating image overlays
• Stacking icons and text
• Layering multiple elements for visual effects

Tip:
You can use CSS (e.g., opacity, z-index, or pointer-events) on the children to control their appearance and interaction within the pile.

HTML Code (Demo)

<div class="pile">
  <img src="https://images.unsplash.com/photo-1688494929970-433dd6cab0dc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400" alt="Image 1">
  <img style="opacity:.5" src="https://images.unsplash.com/photo-1686975284549-5c079539687e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=400" alt="Image 2">
  <span style="color:var(--color-neutral-000)">Overlay Text</span>
</div>

Configuration

{
  "headline": "Pile"
}