DESIGN SYSTEMS & CODE

Responsive Breakpoint & Layout Calculator

Configure a synchronized breakpoint scale for media queries and modern CSS container queries, then calculate exact aspect-ratio dimensions that eliminate Cumulative Layout Shift.

@media & @container From One ScaleLive Viewport SimulationCLS-Safe Aspect-Ratio MathTailwind screens Export
Design SystemsNeed a full responsive system built for your product?Talk to design team
Part 1

Breakpoint Scale

Preset
Need a Custom Grid System? →

Simulate Viewport

1024px
basesm (640px+)md (768px+)lg (1024px+)xl (1280px+)2xl (1536px+)

At 1024px, the active breakpoint is lg.

:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

@media (min-width: 640px) { /* sm and up */ }
@media (min-width: 768px) { /* md and up */ }
@media (min-width: 1024px) { /* lg and up */ }
@media (min-width: 1280px) { /* xl and up */ }
@media (min-width: 1536px) { /* 2xl and up */ }
Part 2

Aspect-Ratio & CLS Calculator

Ratio preset

computed height

450px

Simplified ratio: 16:9

Need a CLS Audit on Your Site? →

Live Preview

800 × 450
.media {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}
Responsive Engineering Guide

Media Queries, Container Queries & CLS

Why Combine Media Queries with Container Queries?

A media query only knows about the browser's viewport — a card inside a narrow sidebar still gets the "desktop" styles if the window is wide. A container query responds to the width of its own parent instead, so the same card component adapts correctly whether it's in a full-width feed or a 320px sidebar. Both use the same kind of min-width thresholds, which is why this tool generates them from one shared breakpoint scale.

How Aspect-Ratio Prevents Layout Shift

Cumulative Layout Shift (CLS) happens when content jumps because the browser didn't know how much space to reserve before an image finished loading. Setting an explicit aspect-ratio (or width/height attributes) lets the browser calculate and reserve the exact box up front — the layout never moves once the image bytes arrive.

Step-by-Step: How to Use This Calculator

01

Pick a breakpoint preset, or dial in your own

Tailwind Defaults matches the ecosystem most component libraries expect. Device-Based mirrors real phone/tablet/laptop/desktop/ultrawide widths if you're designing from device mockups.

02

Simulate a viewport to sanity-check the scale

Drag the Simulate Viewport slider and watch which named breakpoint lights up — a fast way to confirm your thresholds land where you expect before you ship them.

03

Export both media and container query CSS

Use @media for page-level layout (nav, page grid) and @container for reusable components (cards, widgets) that need to adapt to whatever container they're dropped into.

04

Compute exact image dimensions per breakpoint

Pick your image's aspect ratio and the width it actually renders at (not the source file's dimensions), and copy the exact height into your CSS or Next.js Image component.

Frequently Asked Questions

What's the difference between @media and @container?

@media reads the browser viewport - the same styles apply everywhere on the page. @container reads the width of a specific parent element, so the same component can respond differently depending on where it's placed.

Do I need container-type: inline-size for @container to work?

Yes - a container query only works on an ancestor that has explicitly opted in with container-type (and optionally container-name), which is why this tool generates that declaration alongside the queries themselves.

Why does the aspect-ratio calculator ask for 'target render width', not the image's real size?

CLS prevention only cares about how large the image will actually display on the page - the source file can be a completely different resolution. Using the rendered width keeps the reserved space accurate.

Do I still need the padding-top percentage hack?

Almost never for modern projects - the CSS aspect-ratio property has excellent support in all current browsers. The legacy fallback is included for projects that still need to support very old browser versions.

UI Pirate Ecosystem

Suggested Tools for Your Stack

Explore related utilities in this workflow or discover cross-category tools.

View All Tools →