Did you know CSS has a hidden gem called display: contents?
It’s a powerful tool that helps simplify layouts without adding extra DOM elements. It removes an element from the layout while keeping its children intact.
Why is this so powerful?
- It lets you restructure layouts without adding extra wrappers.
- It works seamlessly with Flexbox and Grid, making designs more flexible.
- It pairs perfectly with order to rearrange content without duplication.
On desktop, blocks 2 and 3 sit next to block 1 inside a container. On mobile, block 2 moves above block 1, and block 3 drops below it.
Normally, this would require workarounds: extra markup, hacks, or even duplicated content.
With display: contents, it’s just one line of CSS.
Browser support is already at 97%! But be aware, this property has some accessibility issues, especially with screen readers.
<section>
<div class="first"></div>
<div class="container">
<div class="second"></div>
<div class="third"></div>
</div>
</section>section {
grid-template-columns: 1fr;
}
.container {
display: contents;
}
.first {
order: 2;
}
.second {
order: 1;
}
.third {
order: 3;
}Full code available here: https://codepen.io/theosoti/pen/KwPZGQQ
display: contents can simplify wrapper-heavy markup in layout contexts, but semantics still matter. Verify accessibility tree behavior for interactive and labeled content before broad adoption.
Selector-driven improvements scale best when specificity remains controlled. Keep targeting rules readable so future edits do not become cascade puzzles.
To roll this out safely, start by applying display: contents in a single UI surface where the benefit is obvious. That rollout sequence preserves clarity and reduces regressions during future refactors.
Use display: contents selectively on structural wrappers, and keep semantic elements intact when labels or landmarks are required.
Want to build modern interfaces with less JavaScript?
I wrote a guide about building modern UI with HTML and CSS first. It covers practical patterns you can use before reaching for JavaScript.
Learn more