Splendid layouts

Stack elements without position: absolute

stack uses CSS Grid to stack elements together.

index.html
<div class="stack">
  <div class="background"> Background </div>
  <div> Content </div>
  <div class="foreground"> Foreground </div>
</div>
Background
Content
Foreground
Hover over this to see the stack

The entire stack contains the same height and width

If one layer has more content than others, the entire stack expands in accordance to that layer.

index.html
<div class="stack">
  <div class="background"> Background </div>
  <div> Lots of content ... </div>
  <div class="foreground"> Foreground </div>
</div>
Background
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Corporis reprehenderit facilis ab veniam aut unde pariatur laborum?
Foreground
Hover over this to see the stack

Make complex layouts with stacking elements a cinch

This becomes super easy and doable because stacked elements contains the same height and width.

So backgrounds are automatically contained within the stack — no overflow headaches!

index.html
<div class="stack">
  <div class="background"> SVG Background here ... </div>
  <div> Content </div>
  <div class="foreground"> Pill #1 </div>
  <div class="foreground"> Pill #2 </div>
  </div>
</div>
Note

This example uses edge to position the pills on the foreground.

Card Content goes here. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Recommended