DEV Community

Alex Parra
Alex Parra

Posted on

4

CSS display "stack"

NOTE: display: stack does not exist. Read on for more info.

Background

Two and half years ago, I wrote a post on Medium about this possible new kind of display I called stack that "would be a hybrid of flexbox and z-index".

https://medium.com/@alexpds/css-display-stack-7bdc02bc1434

This new layout method, would allow the ‘stack’ wrapping element to automatically assume the height of the tallest of it’s childs.
So, with similar syntax to flexbox, we could override the order (z-order) of the various elements, more or less like we can with z-index, but the tallest child would affect the ‘stack’ height and thus no issues with unwanted overflows, uncontrollable overlaps.

Grid to the rescue!

Back then (May 2017), CSS Grid was still being defined and if what I'm showing below was possible back then I didn't know.
But today CSS Grid support is very broad and it allows exactly what I described in the original article.

.stack { 
  display: grid;
  grid-template-areas: "stack"; /* or whatever name you prefer */
}

.stack > * {
  grid-area: stack; /* same name as used above without quotes */
}

.stack .top-most {
  z-index: 1; /* default order is 0. Highest shows on top  */
}
Enter fullscreen mode Exit fullscreen mode

Example on CodeSandbox

https://codesandbox.io/s/dry-worker-0nv9b

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more