Choosing the Best Container & Artboard Widths for Responsive Design

One of the most common reasons a design falls apart during development is a mismatch between how the designer set up artboards in Figma and how the browser actually lays out content. Breakpoints chosen by gut feel, container widths that do not align with any real device, and fluid columns that were never tested — these problems are preventable, and they are preventable at the Figma stage.

This guide covers the breakpoints worth designing for, the container max-widths that give developers the least friction, and how to structure artboards in Figma so that your handoff translates cleanly to code.

What are container widths and why do they matter?

A container width is the maximum width a content column is allowed to reach before it stops expanding, keeping text readable and layouts balanced regardless of the user's screen size. Without a defined container, your content will stretch to the full width of any monitor — a 27-inch display becomes a 2560-pixel-wide wall of text that nobody wants to read.

Container widths work hand-in-hand with breakpoints: as the viewport narrows, the container either shrinks proportionally (fluid) or snaps to a new fixed width (step-based). Most modern sites use a hybrid — a fluid container with a defined maximum.

The breakpoints worth designing for

The web has dozens of screen sizes, but most traffic clusters around a handful of ranges. Designing for the five viewports below covers the overwhelming majority of real users.

In Figma, design your primary artboards at 390 px (mobile), 768 px (tablet), and 1440 px (desktop). These three cover the ranges where layout decisions are genuinely different — the rest can interpolate.

Recommended container max-widths

The artboard is the canvas; the container is the inner column where your content lives. These two numbers should not be the same.

A max-width of 1200 px at desktop is the most universally used value — it fits comfortably on a 1280 px laptop without horizontal scrolling, and it still has breathing room on larger screens. For content-heavy sites (editorial, documentation), 960–1024 px reads better. For image-forward or marketing sites, 1280–1440 px makes better use of wide screens.

Designing artboards in Figma that translate cleanly to code

Use auto layout everywhere

Auto layout is the Figma equivalent of CSS flexbox. Frames built with auto layout — rather than absolute positions — map directly to how a developer will write the CSS. When a designer uses absolute positioning for everything, the developer has to invent the layout logic from scratch. When you use auto layout, the gaps, padding, and stacking order are already documented in the design.

Name your containers explicitly

Create a frame called Container inside each artboard, set its width to your target max-width (e.g., 1200 px on a 1440 px artboard), center it horizontally with margin: 0 auto behavior (use centered alignment in the parent frame), and put all content inside it. This single habit prevents most handoff confusion.

Set gutters at the frame level, not between individual elements

Instead of adding 20 px of left margin to each card in a grid, set a 20 px gap on the parent auto-layout frame. This keeps spacing semantic — one value to change if the grid needs to be tighter — and it maps directly to column-gap in CSS.

Design all three artboards before handoff

It is tempting to design desktop and hand off a note saying "make it responsive." It never ends well. The developer has to make every layout decision you did not make. Design at least mobile and desktop; tablet is worth doing for anything with a complex grid or navigation.

Fluid vs. fixed containers

Fluid containers use percentage widths (width: 90%) and scale continuously as the viewport changes. They adapt smoothly but can produce awkward widths at edge-case screen sizes.

Fixed step containers snap to specific widths at defined breakpoints — 100% on mobile, 720 px at tablet, 1200 px at desktop. They are easier to design for because each breakpoint has a single predictable layout.

Most production sites use a fixed-step max-width with fluid behavior inside it: the container has max-width: 1200px; width: 100%; margin: 0 auto. Below 1200 px, it scales fluidly; above, it holds at 1200 px and adds white space on the sides.

Gutters and margins in practice

Gutters are the spaces between grid columns. Margins are the space between the container edge and the content. Common values:

• Mobile: 16–20 px side margins, no multi-column grid (stack everything)
• Tablet: 24–32 px side margins, 2-column grids with 24 px gutters
• Desktop: 40–80 px side margins, 3–4 column grids with 24–32 px gutters

Stick to multiples of 4 px or 8 px. This aligns with most spacing scales (4, 8, 12, 16, 24, 32, 48, 64, 96) and makes developer handoff trivial — every spacing value is a recognizable token, not a random pixel count.

A note on 1920 px artboards

Designing at 1920 px is worth doing if your client has users on wide monitors (e-commerce, SaaS dashboards, design tools). The rule of thumb: cap your container at 1440 px even on a 1920 px canvas, and use the remaining space for background colors, full-bleed images, or generous white space. Content that stretches to 1920 px reads poorly on every screen size.

Putting it all together

A clean responsive setup in Figma looks like this:

1. Three artboards: 390 px, 768 px, 1440 px
2. A Container frame inside each, auto-layout, horizontally centered
3. Content lives inside Container, never positioned relative to the artboard edge
4. Consistent component names across all three breakpoints
5. Spacing in 4/8 px multiples throughout

When development starts from a file structured this way, the handoff conversation is about design decisions, not reconstructing spacing values from screenshots.

If you want a Figma design turned into clean, responsive production code with no layout surprises at any breakpoint, explore our services or get a free quote — we handle both the design-to-code translation and the QA across devices.