CSS display: contents
Master the invisible wrapper technique that revolutionizes modern web
layouts. Create stunning portfolios, dashboards, and complex
interfaces with ease.
🎯 What is display: contents
?
The display: contents
property makes an element's box
disappear entirely from the layout, as if it never existed. However,
its children remain visible and participate in the layout as if they
were direct children of the element's parent.
Without display: contents
Parent → Wrapper → Children
With display: contents
Parent → Children (wrapper invisible)
🖼️ Portfolio Gallery Layout
Perfect for creating seamless image galleries where grouped items need
to flow naturally with the main grid.
Apply display: contents
to featured gallery wrapper
Image 1
Image 2
Featured 1
Featured 2
Featured 3
Image 3
Image 4
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit,
minmax(200px, 1fr)); gap: 15px; } .featured-wrapper { /* When display:
contents is applied, featured items join the main gallery grid */
display: contents; }
👤 Professional Profile Layout
Create clean profile layouts where semantic wrappers don't interfere
with the visual grid structure.
Apply display: contents
to profile wrapper
👨💻
John Developer
Senior Frontend Engineer
Experience: 5+ years
Skills: React, TypeScript, CSS
Location: San Francisco, CA
<div class="profile-wrapper"> <div
class="profile-container"> <div
class="profile-avatar">👨💻</div> <div
class="profile-info"> <div class="profile-name">John
Developer</div> <div class="profile-title">Senior Frontend
Engineer</div> <div
class="profile-details">...</div> </div> </div>
</div>
📊 Dashboard Layout
Build complex dashboard layouts where components need to participate
in the main grid structure.
Apply display: contents
to dashboard wrapper
Main Content Area
This is where the primary dashboard content would be
displayed.
Quick Stats
📈 Revenue: $12,345
👥 Users: 1,234
📊 Growth: +15%
.dashboard-grid { display: grid; grid-template-areas: "header header
header" "sidebar main stats" "sidebar main stats";
grid-template-columns: 200px 1fr 200px; gap: 15px; }
.dashboard-wrapper { /* Wrapper disappears, grid items flow naturally
*/ display: contents; }
🃏 Card Layout System
Create flexible card layouts where grouped cards can seamlessly
integrate with the main grid.
Apply display: contents
to card wrapper
🚀 Performance
Optimize your website's loading speed and user experience.
🎨 Design
Create beautiful, modern interfacezero-swos that users love.
🔧 Development
Build robust, scalable applications with modern tools.
📱 Mobile
Ensure perfect responsiveness across all devices.
🔒 Security
Implement best practices for data protection.
.card-grid { display: grid; grid-template-columns: repeat(auto-fit,
minmax(250px, 1fr)); gap: 20px; } .card-wrapper { /* Grouped cards
join the main grid seamlessly */ display: contents; }
🧭 Navigation Example
Remove semantic wrappers while preserving styling and accessibility:
💡 Modern Use Cases
🖼️
Image Galleries
Create seamless photo galleries where featured collections
integrate naturally with the main grid layout.
📊
Dashboard Layouts
Build complex admin interfaces where components need to
participate in sophisticated grid structures.
🃏
Card Systems
Design flexible card layouts for portfolios, product showcases,
and content management systems.
👤
Profile Pages
Create professional profile layouts with clean grid structures for
resumes and team pages.
🛍️
E-commerce
Build product grids where promotional sections seamlessly blend
with regular product listings.
📱
Mobile Apps
Design responsive layouts that adapt perfectly across different
screen sizes and orientations.
⚖️ Pros and Cons
✅ Advantages
Enables flexible CSS Grid and Flexbox layouts
Maintains semantic HTML structure
Perfect for component-based architectures
Solves complex layout challenges elegantly
Improves design system flexibility
No need to restructure existing HTML
❌ Disadvantages
Can break accessibility for screen readers
Limited browser support in older versions
May cause confusion in complex layouts
Debugging can be more challenging
Not suitable for all semantic elements
Requires careful testing across devices
🛡️ Browser Support
Modern browser support is excellent for production use:
✅ Chrome 65+ (March 2018) ✅ Firefox 37+ (March 2015) ✅ Safari 11.1+
(March 2018) ✅ Edge 79+ (January 2020) ❌ Internet Explorer (No
Support)
For production use, consider providing fallbacks:
/* Progressive enhancement approach */ .wrapper { /* Default styling
for older browsers */ padding: 20px; background: #f0f0f0; } @supports
(display: contents) { .wrapper { display: contents; } }
⚠️ Accessibility Considerations
Critical Accessibility Warning!
Screen readers may ignore elements with
display: contents
, which can break the semantic
structure. Be especially careful with:
<section>
, <article>
,
<nav>
, <main>
<header>
, <footer>
,
<aside>
<figure>
, <figcaption>
Any element with ARIA roles or labels
Best Practice: Test with screen readers and
consider using role="presentation"
for purely
decorative wrappers.
🎪 Advanced Techniques
Responsive Display Contents
/* Mobile-first approach */ .gallery-wrapper { display: block;
padding: 20px; background: #f0f0f0; } /* Remove wrapper on larger
screens */ @media (min-width: 768px) { .gallery-wrapper { display:
contents; } } /* Feature query for safety */ @supports (display:
contents) { @media (min-width: 768px) { .gallery-wrapper { display:
contents; } } }
JavaScript Integration
// Dynamic layout switching function toggleLayoutMode(element,
useContents = true) { if (CSS.supports('display', 'contents') &&
useContents) { element.style.display = 'contents'; } else {
element.style.display = 'block'; } } // Responsive behavior function
handleResize() { const wrappers =
document.querySelectorAll('.layout-wrapper'); const isMobile =
window.innerWidth < 768; wrappers.forEach(wrapper => {
toggleLayoutMode(wrapper, !isMobile); }); }
window.addEventListener('resize', handleResize);
🚀 Performance & Best Practices
Performance Benefits:
Reduced DOM Complexity: Fewer boxes to calculate
during layout
Simplified Rendering: Browser skips box
generation for invisible elements
Better Grid Performance: Direct participation in
parent grid reduces nesting
Memory Efficiency: Less memory usage for layout
calculations
Best Practices:
Use for layout wrappers, not semantic elements
Test thoroughly with screen readers
Provide fallbacks for older browsers
Document usage for team members
Consider using CSS custom properties for dynamic control
📚 Summary
display: contents
is a game-changing CSS property that
enables:
Portfolio Galleries: Seamless image grids with
featured collections
Dashboard Layouts: Complex admin interfaces with
flexible grid structures
Profile Pages: Clean, professional layouts for
resumes and team pages
Card Systems: Flexible content layouts for modern
web applications
E-commerce Sites: Product grids with integrated
promotional sections
Remember to prioritize accessibility, test across browsers, and use
progressive enhancement for the best user experience.