CSS · Modern Layout

Modern Responsive Units

Master viewport units, container queries, and fluid sizing with clamp(), min(), and max()

Find videos you like?

Save to resource drawer for future reference!

What are Modern Responsive Units?

CSS units that adapt to viewport and container sizes

Modern CSS provides powerful responsive units that go beyond pixels and percentages. These units automatically scale based on viewport size, container dimensions, or use mathematical functions like clamp() for fluid, responsive designs without media queries!

Viewport Units

vw, vh, vmin, vmax - Scale with browser window

Container Units

cqw, cqh, cqi, cqb - Scale with parent container

Fluid Functions

clamp(), min(), max() - Mathematical sizing

Interactive Unit Comparison

See how different units behave

📏

Viewport Width

50vw = 50% of viewport width

1. Viewport Units (vw, vh, vmin, vmax)

Units relative to the viewport dimensions

Viewport Units Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viewport Units Demo</title>
  </head>
  <body>
    <div class="hero">
      <div class="title">🎯 Viewport Units</div>
      <div class="subtitle">
        These elements scale based on your viewport size.
        Try resizing your browser window!
      </div>
      <div class="demo-boxes">
        <div class="box">
          <div class="value">100vw</div>
          <div class="unit-label">Full Width</div>
        </div>
        <div class="box">
          <div class="value">100vh</div>
          <div class="unit-label">Full Height</div>
        </div>
        <div class="box">
          <div class="value">50vmin</div>
          <div class="unit-label">Smaller Dimension</div>
        </div>
        <div class="box">
          <div class="value">50vmax</div>
          <div class="unit-label">Larger Dimension</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

📏 Viewport Unit Types:

vw (viewport width): 1vw = 1% of viewport width
vh (viewport height): 1vh = 1% of viewport height
vmin: 1vmin = 1% of smaller viewport dimension
vmax: 1vmax = 1% of larger viewport dimension

2. Fluid Sizing with clamp()

Set minimum, preferred, and maximum values in one property

clamp() Function Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clamp() Function Demo</title>
  </head>
  <body>
    <div class="container">
      <h1>🎯 Fluid Typography with clamp()</h1>
      <div class="demo-section">
        <div class="fluid-text">
          This text smoothly scales between minimum and maximum sizes based on the viewport width.
          No media queries needed! Try resizing your browser to see the magic happen.
        </div>
        <div class="code-block">font-size: clamp(1rem, 2.5vw, 1.5rem);</div>
      </div>
      <h2 style="font-size: clamp(1.5rem, 3vw, 2.5rem); margin-top: 40px; text-align: center;">
        📦 Responsive Cards
      </h2>
      <div class="cards">
        <div class="card">
          <div class="card-title">Fluid Padding</div>
          <p style="color: #64748b; font-size: clamp(0.9rem, 2vw, 1rem);">
            Padding adjusts from 15px to 30px based on viewport
          </p>
          <div class="label">clamp(15px, 3vw, 30px)</div>
        </div>
        <div class="card">
          <div class="card-title">Fluid Gaps</div>
          <p style="color: #64748b; font-size: clamp(0.9rem, 2vw, 1rem);">
            Grid gaps scale smoothly from small to large screens
          </p>
          <div class="label">gap: clamp(15px, 3vw, 30px)</div>
        </div>
        <div class="card">
          <div class="card-title">Fluid Widths</div>
          <p style="color: #64748b; font-size: clamp(0.9rem, 2vw, 1rem);">
            Column widths adapt perfectly to screen size
          </p>
          <div class="label">minmax(clamp(...))</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Understanding clamp()

clamp(min, preferred, max)

The browser chooses a value between min and max, using the preferred value when possible. Perfect for fluid typography and spacing without media queries!

Example: font-size: clamp(1rem, 2.5vw, 2rem);

3. Container Query Units (cqw, cqh)

Size elements based on parent container, not viewport

Container Query Units

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Units</title>
  </head>
  <body>
    <div class="main-container">
      <h1>📦 Container Query Units</h1>
      <div class="info-box">
        <strong style="color: #4f46e5;">💡 What are Container Query Units?</strong>
        <p style="margin-top: 10px; color: #64748b;">
          Unlike viewport units (vw, vh) that scale based on the viewport,
          container query units (cqw, cqh) scale based on their parent container's size.
          This makes components truly modular and reusable!
        </p>
      </div>
      <div class="sidebar-layout">
        <div class="sidebar">
          <div class="sidebar-content">
            5cqw Sidebar Text
          </div>
          <div style="text-align: center; font-size: 0.9rem; color: #6366f1; margin-top: 15px;">
            Scales with sidebar width
          </div>
        </div>
        <div class="main-content">
          <div class="responsive-card">
            <div class="card-title">4cqw Title</div>
            <div class="card-text">
              This card uses container query units (cqw, cqh) for sizing.
              The text and padding scale based on the main content container,
              not the entire viewport!
            </div>
          </div>
          <div class="responsive-card">
            <div class="card-title">Responsive Cards</div>
            <div class="card-text">
              Try resizing the browser. Notice how these cards scale independently
              based on their container, creating a truly component-based design system.
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center; padding: 30px; background: #f8fafc; border-radius: 12px; margin-top: 30px;">
        <h3 style="color: #4f46e5; margin-bottom: 15px;">🎯 Container Unit Types</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 20px;">
          <div style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e0e7ff;">
            <strong style="color: #6366f1;">cqw</strong>
            <div style="font-size: 0.9rem; color: #64748b; margin-top: 5px;">Container Width</div>
          </div>
          <div style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e0e7ff;">
            <strong style="color: #6366f1;">cqh</strong>
            <div style="font-size: 0.9rem; color: #64748b; margin-top: 5px;">Container Height</div>
          </div>
          <div style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e0e7ff;">
            <strong style="color: #6366f1;">cqi</strong>
            <div style="font-size: 0.9rem; color: #64748b; margin-top: 5px;">Inline Size</div>
          </div>
          <div style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e0e7ff;">
            <strong style="color: #6366f1;">cqb</strong>
            <div style="font-size: 0.9rem; color: #64748b; margin-top: 5px;">Block Size</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

📦 Container Unit Types:

cqw: 1% of container's width
cqh: 1% of container's height
cqi: 1% of container's inline size
cqb: 1% of container's block size

Quick Reference

Common responsive unit patterns

font-size: clamp(1rem, 2.5vw, 2rem);

Fluid typography between 1rem and 2rem

height: 100vh;

Full viewport height (hero sections)

width: min(100%, 1200px);

Responsive container with max-width

padding: clamp(1rem, 5vw, 3rem);

Fluid spacing that scales

font-size: 4cqw;

Text scales with container width

Best Practices

Use clamp() for typography: Avoid text being too small or large on any device
Prefer vmin/vmax for squares: Maintains shape across all viewports
Combine units: calc(50vw - 20px) for precise control
Container queries for components: Makes components truly modular and reusable
Test across devices: Viewport units behave differently on mobile

Browser Support

Viewport units: Excellent support in all modern browsers.
clamp(), min(), max(): Chrome 79+, Firefox 75+, Safari 13.1+
Container queries: Chrome 105+, Firefox 110+, Safari 16+ (cutting-edge feature!)

Previous Topic

Aspect Ratio

aspect-ratio property, maintaining ratios for images/videos, and responsive aspect ratios.

Next Topic

Transitions

Transition properties, duration, timing functions (ease, cubic-bezier), delays, and smooth interactions.

Ask a Question

Have a question about Modern Responsive Units? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Modern Layout

Modern Responsive Units

Master viewport units, container queries, and fluid sizing with clamp(), min(), and max()

Find videos you like?

Save to resource drawer for future reference!

What are Modern Responsive Units?

CSS units that adapt to viewport and container sizes

Viewport Units

vw, vh, vmin, vmax - Scale with browser window

Container Units

cqw, cqh, cqi, cqb - Scale with parent container

Fluid Functions

clamp(), min(), max() - Mathematical sizing

Interactive Unit Comparison

See how different units behave

📏

Viewport Width

50vw = 50% of viewport width

1. Viewport Units (vw, vh, vmin, vmax)

Units relative to the viewport dimensions

Viewport Units Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viewport Units Demo</title>
  </head>
  <body>
    <div class="hero">
      <div class="title">🎯 Viewport Units</div>
      <div class="subtitle">
        These elements scale based on your viewport size.
        Try resizing your browser window!
      </div>
      <div class="demo-boxes">
        <div class="box">
          <div class="value">100vw</div>
          <div class="unit-label">Full Width</div>
        </div>
        <div class="box">
          <div class="value">100vh</div>
          <div class="unit-label">Full Height</div>
        </div>
        <div class="box">
          <div class="value">50vmin</div>
          <div class="unit-label">Smaller Dimension</div>
        </div>
        <div class="box">
          <div class="value">50vmax</div>
          <div class="unit-label">Larger Dimension</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

📏 Viewport Unit Types:

vw (viewport width): 1vw = 1% of viewport width
vh (viewport height): 1vh = 1% of viewport height
vmin: 1vmin = 1% of smaller viewport dimension
vmax: 1vmax = 1% of larger viewport dimension

2. Fluid Sizing with clamp()

Set minimum, preferred, and maximum values in one property

clamp() Function Demo

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clamp() Function Demo</title>
  </head>
  <body>
    <div class="container">
      <h1>🎯 Fluid Typography with clamp()</h1>
      <div class="demo-section">
        <div class="fluid-text">
          This text smoothly scales between minimum and maximum sizes based on the viewport width.
          No media queries needed! Try resizing your browser to see the magic happen.
        </div>
        <div class="code-block">font-size: clamp(1rem, 2.5vw, 1.5rem);</div>
      </div>
      <h2 style="font-size: clamp(1.5rem, 3vw, 2.5rem); margin-top: 40px; text-align: center;">
        📦 Responsive Cards
      </h2>
      <div class="cards">
        <div class="card">
          <div class="card-title">Fluid Padding</div>
          <p style="color: #64748b; font-size: clamp(0.9rem, 2vw, 1rem);">
            Padding adjusts from 15px to 30px based on viewport
          </p>
          <div class="label">clamp(15px, 3vw, 30px)</div>
        </div>
        <div class="card">
          <div class="card-title">Fluid Gaps</div>
          <p style="color: #64748b; font-size: clamp(0.9rem, 2vw, 1rem);">
            Grid gaps scale smoothly from small to large screens
          </p>
          <div class="label">gap: clamp(15px, 3vw, 30px)</div>
        </div>
        <div class="card">
          <div class="card-title">Fluid Widths</div>
          <p style="color: #64748b; font-size: clamp(0.9rem, 2vw, 1rem);">
            Column widths adapt perfectly to screen size
          </p>
          <div class="label">minmax(clamp(...))</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

Understanding clamp()

clamp(min, preferred, max)

The browser chooses a value between min and max, using the preferred value when possible. Perfect for fluid typography and spacing without media queries!

Example: font-size: clamp(1rem, 2.5vw, 2rem);

3. Container Query Units (cqw, cqh)

Size elements based on parent container, not viewport

Container Query Units

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Units</title>
  </head>
  <body>
    <div class="main-container">
      <h1>📦 Container Query Units</h1>
      <div class="info-box">
        <strong style="color: #4f46e5;">💡 What are Container Query Units?</strong>
        <p style="margin-top: 10px; color: #64748b;">
          Unlike viewport units (vw, vh) that scale based on the viewport,
          container query units (cqw, cqh) scale based on their parent container's size.
          This makes components truly modular and reusable!
        </p>
      </div>
      <div class="sidebar-layout">
        <div class="sidebar">
          <div class="sidebar-content">
            5cqw Sidebar Text
          </div>
          <div style="text-align: center; font-size: 0.9rem; color: #6366f1; margin-top: 15px;">
            Scales with sidebar width
          </div>
        </div>
        <div class="main-content">
          <div class="responsive-card">
            <div class="card-title">4cqw Title</div>
            <div class="card-text">
              This card uses container query units (cqw, cqh) for sizing.
              The text and padding scale based on the main content container,
              not the entire viewport!
            </div>
          </div>
          <div class="responsive-card">
            <div class="card-title">Responsive Cards</div>
            <div class="card-text">
              Try resizing the browser. Notice how these cards scale independently
              based on their container, creating a truly component-based design system.
            </div>
          </div>
        </div>
      </div>
      <div style="text-align: center; padding: 30px; background: #f8fafc; border-radius: 12px; margin-top: 30px;">
        <h3 style="color: #4f46e5; margin-bottom: 15px;">🎯 Container Unit Types</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 20px;">
          <div style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e0e7ff;">
            <strong style="color: #6366f1;">cqw</strong>
            <div style="font-size: 0.9rem; color: #64748b; margin-top: 5px;">Container Width</div>
          </div>
          <div style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e0e7ff;">
            <strong style="color: #6366f1;">cqh</strong>
            <div style="font-size: 0.9rem; color: #64748b; margin-top: 5px;">Container Height</div>
          </div>
          <div style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e0e7ff;">
            <strong style="color: #6366f1;">cqi</strong>
            <div style="font-size: 0.9rem; color: #64748b; margin-top: 5px;">Inline Size</div>
          </div>
          <div style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e0e7ff;">
            <strong style="color: #6366f1;">cqb</strong>
            <div style="font-size: 0.9rem; color: #64748b; margin-top: 5px;">Block Size</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

📦 Container Unit Types:

cqw: 1% of container's width
cqh: 1% of container's height
cqi: 1% of container's inline size
cqb: 1% of container's block size

Quick Reference

Common responsive unit patterns

font-size: clamp(1rem, 2.5vw, 2rem);

Fluid typography between 1rem and 2rem

height: 100vh;

Full viewport height (hero sections)

width: min(100%, 1200px);

Responsive container with max-width

padding: clamp(1rem, 5vw, 3rem);

Fluid spacing that scales

font-size: 4cqw;

Text scales with container width

Best Practices

Use clamp() for typography: Avoid text being too small or large on any device
Prefer vmin/vmax for squares: Maintains shape across all viewports
Combine units: calc(50vw - 20px) for precise control
Container queries for components: Makes components truly modular and reusable
Test across devices: Viewport units behave differently on mobile

Browser Support

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Aspect Ratio

Transitions

Building Your Learning Module...

Modern Responsive Units

Viewport Units

Container Units

Fluid Functions

Viewport Units Demo

📏 Viewport Unit Types:

clamp() Function Demo

Understanding clamp()

Container Query Units

📦 Container Unit Types:

Best Practices

Browser Support

Aspect Ratio

Transitions

Modern Responsive Units

Viewport Units

Container Units

Fluid Functions

Viewport Units Demo

📏 Viewport Unit Types:

clamp() Function Demo

Understanding clamp()

Container Query Units

📦 Container Unit Types:

Best Practices

Browser Support