Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
contain property tells the browser that an element's internal layout is completely independent from the rest of the page. This allows the browser to skip expensive layout calculations and dramatically improve performance!When you apply contain, you're telling the browser: "This element is self-contained. You don't need to check the rest of the page when this changes!"
Use containment on independent components like cards, widgets, list items, and modals. Perfect for React/Vue components, infinite scroll lists, and any self-contained UI element!
Isolates layout. Changes inside don't affect outside.
contain: layout;Content can't display outside bounds.
contain: paint;Element sized without checking children.
contain: size;Scopes counters and quotes to this element.
contain: style;Shorthand: layout + paint + style. Recommended!
contain: content;ALL types! Maximum isolation & performance.
contain: strict;contain: content; for most cases - great performance without strict sizing requirements!<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>CSS Containment - Layout</title></head><body><div class="container"><h1>📦 CSS Containment</h1><p class="subtitle">Optimize rendering performance</p><div class="demo-grid"><div class="contained"><div class="card-title">✅ With Containment</div><div class="card-content">This element uses <strong>contain: layout style paint</strong> to isolate its layout from the rest of the page.</div><span class="badge badge-contained">Optimized</span></div><div class="not-contained"><div class="card-title">❌ Without Containment</div><div class="card-content">This element doesn't use containment, so layout changes can affect the entire document.</div><span class="badge badge-not">Not Optimized</span></div></div><div class="info-box"><div class="info-title">⚡ Performance Benefits</div><p class="info-text">Containment tells the browser that an element's internal layout is independent from the rest of the page. This allows the browser to optimize rendering by skipping layout calculations for contained elements when other parts of the page change.</p></div></div></body></html>Loading preview...
Independent rendering for React/Vue components
Isolate each item for smooth scrolling
Optimize off-screen content
Isolate ads, widgets, iframes