The new display value of 'contents'

I was just reading Rachel’s blog about display:contents which is now available in latest Firefox and decided to have a play around with it. :slight_smile:

I’ve always wanted to create columns that wrap and stretch and still maintain integrity with the cell above them similar to the way that table rows work except of course that table-rows contain a fixed number of cells and the cells can’t wrap to fewer cells (although they can wrap to one cell using display:block).

Flexbox can stretch and wrap blocks but it can’t manage content sensitive alignment for the columns. (I’m sure grid layout can do this but haven’t got around to testing that yet).

Anyway here’s my attempt which uses display table/cell to create initially 8 cells that then will subdivide to 4 and then 2 and then one cell as the window is made smaller.

Latest Firefox only

It’s only an experiment and abuses the html a little but I always find it interesting in seeing what can be accomplished.

Can you think of any other uses for display:contents apart from the ones mentioned in the article?

5 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.