TIL: CSS `display-contents`
I’ve been playing around a lot with
css-grid in the last days. One of the problem that I commonly run into is when an element group has a wrapper and the wrapper is contained in a
flex or a
grid block. The easiest way to fix an issue like this is to assign the wrapper a
grid). It’s really easy to do that, but whenever I do this, I hear sounds that says “It’s a hack”, “This is not clean”.
I generally have this issue when working on a WordPress theme or a template.
display-contents to the resuce
The solution to an issue like this is to add the style
display:contents to the wrapper element. It makes the children appear to be direct children on the parent. The wrapper element will “disappear”.
Can I use ?
display:contentsis supported in number of browsers at the moment. MDN says its “experimental”. I say, go for it. I’ve been using this in cases where if it was not supported, the design would still not look ugly.