display: contents
The display: contents CSS declaration sets an element to display only its contents, not itself. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Overview
The display: contents CSS declaration sets an element to display only its contents, not itself. It is useful when you need more deliberate control over presentation or behavior in a focused part of the interface.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.display.contents | 65 | 79 | 37 | 11.1 | 65 | 11.3 |
| CSS property | ||||||
contents.contents unusual Specific behavior of unusual elements when `display: contents` is applied to them | 65 | 79 | 59 | | 65 | |
contents.focusable elements Experimental Elements with `display: contents` are focusable | | | | | | |
Syntax
.wrapper {
display: contents;
}
/* Child elements participate directly in the grid */
.grid { display: grid; }
.grid .wrapper > * { /* Positioned as grid items */ }Live demo
Use cases
Use display: contents
Use display: contents when the default CSS behavior is not expressive enough for the component or layout you are building.
Handle edge cases
Apply display: contents to solve a specific styling constraint without introducing broader layout or behavior changes.
Cautions
- Test display: contents in the browsers you support, especially if it changes layout, text handling, or interaction behavior.
- Plan a fallback or acceptable degradation path when support is still limited.
Accessibility
- Confirm that using display: contents does not make content harder to perceive, understand, or operate in assistive contexts.
Related links
Powered by web-features