DEV Community

loading...

CSS display "stack"

alexparra profile image Alex Parra ・1 min read

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

Discussion

pic
Editor guide