display: contents

Turn children into siblings of a flex or grid parent

When making a flex or grid, you may want to assemble some children into logical groups for styling or scripting. But when doing so, it may be tricky to keep the parent layout. You may even need to turn those groups into sub flex or grid boxes, complicating the layout you’re trying to accomplish.

That’s when display: contents is useful.

When using that directive, the element’s box model is ignored, and its children are made part of the parent’s box model.

Making a nav bar with display: contents

Let’s say we have this markup for a nav bar with three sections, the site menu, the search form, and the user menu:

<nav>
  <ul class="site-menu">
    <li><a href="/">Home</a></li>
    <li><a href="/shop/">Shop</a></li>
    <li><a href="/blog/">Blog</a></li>
    <li><a href="/about/">About</a></li>
  </ul>
  <form class="search-form" action="/search/" method="post">
    <input placeholder="Search" type="search" />
  </form>
  <ul class="user-menu">
    <li><a href="/settings/">Settings</a></li>
    <li><a href="/account/">Account</a></li>
    <li><a href="/logout">Log Out</a></li>
  </ul>
</nav>

To make the <nav> a flexible box, you’d have to make it display: flex, then every section would need to be display: flex as well. That can get messy.

Instead, you can simply set display: sections on every section, making every container “invisible,” and set every child as a part of the parent display: flex:

nav {
  /* Make nav a flex box. */
  display: flex;
  flex-flow: row nowrap;
}

form,
ul {
  /* Make children part of the parent box model. */
  display: contents;

  /* Some block styling is ignored with `display: contents`. */
  background: pink;
  border: solid 1px cyan;
  flex: 0 0;
}

input {
  /* Flex and grid properties set on children are applied. */
  flex: 1 1;
}

With the above, we can easily make the flex nav bar below, yet have logical groups you can style or script to your needs later:

A few things to keep in mind

There are a few points you may want to consider when using display: contents:

• Works in parent boxes using a flex (display: flex) or grid (display: grid) layout model.
• Box styling—including background, borders, sizes—on elements in a display: contents are ignored. But inline styling—font size and text colour, for example—are still applied.
• Flex and grid properties set on display: contents elements are ignored; only those set on their children are applied.

Another note, unlike align-content: c