The Magical CSS Display Property: Contents!

There are a bunch of display properties in CSS. If you don’t write CSS frequently, you might have missed a cool property that was introduced relatively recently, though it’s not that old either (started gaining support across major browsers around 2018). Well, I’m talking about display: contents.

What does contents do?

The HTML elements like div, span, etc. are wrapped by an invisible box around themselves where we can specify their paddings, margins, and whatnot. So, in general, we work with boxes. But when display: contents is applied, that box seems to magically vanish. Rather, it will be replaced by its pseudo-elements or child-elements. Or you can say, pseudo-boxes or child-boxes. It’s like that box doesn’t exist. Let’s see an example:

<div id=”parent-contatiner”>
  <div id="container" style="display: contents">
    <h3> I am a Panda! </h3>
    <p> I love a Cat! </p>
  </div>
</div>

The container div will not have a box around it, and it will not be visible. Rather, it will be replaced by its children i. e. the h3 and p elements. So now, they are no longer the container’s children, but the parent-container’s children. It will not be gone from the DOM-Tree, it’s just that the Tree will pretend as if it’s not there. Cool right?

Where do I use contents?

You may ask, if the container itself disappears, all the styles and events will be gone, too? The answer is, no. You will still have the events attached to it, and the only styles you will lose are the styles related to box generation (like margin, padding, border, etc). So, where do we use it?

Well, I can give you two scenarios right away.

First, when you need to wrap something within a content for semantic readability, but doing so will break your design. By using contents, you will be able to stand in a sweet spot where you have both — semantic readability and the required design.

Second, you might face a situation, where all your elements need to be direct children of a container that is using flex or grid. You need to apply some styling on some children based on a condition or so. In that case, you can wrap those children within a container with display: contents based on that condition.

Does this sound like a little gibberish to you? Ok, then let me tell you how I found this property in the first place.

A little practice for you!

Let me explain the problem first. I was working on a responsive web page using a mobile-first approach. I had three boxes. In the desktop view they will be shown side by side, just like Image 1 —

Plain and simple flex-row, right? But in the mobile view, Box2 and Box3 will be shown like a stack and this stack will be side by side with Box1 like Image 2 —

Now, how can you achieve that? Think about it. This will introduce you to contents and you might as well have a little hands-on experience!

Let me give you my solution. (Please note that this might not be the only way. It’s just how I solved it personally, and I think it’s neat!)

I have the three boxes inside a parent-container having display: flex applied. I just wrapped Box2 and Box3 in a container. When we are in the mobile view, this container will have display: flex. So now, Box1 and the container are siblings and flex property will only apply to these two. Box2 and Box3 will have separate flex properties applied to them via the container. But when we are in the desktop view, this container will have display: contents. So, in the desktop view, the container visually disappears, and Box2 and Box3 are direct children of the parent-container. Now all three boxes are siblings and flex property from the parent-container applies to all of them. That’s it.

The code may look like this —

<div class="outer-container">
  <span> Box1 </span>
  <div class="inner-container">
    <span> Box2 </span>
    <span> Box3 </span> 
  </div>
</div>

.outer-container {
  display: flex;
  flex-direction: row;
}

.inner-container {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: <breakpoint>px) {
  .inner-container {
    display: contents;
  }
}

A tiny note with warning!
I should mention that this property does not work the same with all the elements. There are some elements that are not rendered purely by the CSS box concepts may behave differently. Please see this doc for further reference.

So, yeah, that’s how I’ve found display: contents, and I think it works like magic. No?