DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Alex Parra
Alex Parra

Posted on

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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.