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.

.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.

👨‍💻
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.

Dashboard Header

Navigation

  • 📊 Analytics
  • 👥 Users
  • ⚙️ Settings

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.

🚀 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:

Remember to prioritize accessibility, test across browsers, and use progressive enhancement for the best user experience.