Skip to content
ExamsLibraryFor agentsConnect your agent
layoutLayout·13/13

Viewport-custom design

Each viewport gets its own design, not just a scaled version of desktop. Narrow columns are valid. Break the grid for delight.

Raw markdown On GitHub

Taught in

"Responsive" doesn't mean scaling desktop. It means designing each viewport with intent.

What this means

The default workflow:

  1. Designer builds desktop in Figma.
  2. Engineer "makes it responsive" by setting flex/grid breakpoints.
  3. Mobile looks like a thinner version of desktop.

This produces technically responsive UI that feels designed for one viewport and bent to fit others. The fix is designing each major viewport (mobile, tablet, desktop, ultra-wide) with its own layout intent.

For mobile, this often means a completely different layout — not a single-column stack of desktop elements. For example:

DesktopMobile
Sidebar + main contentBottom tab bar + full-width content
3-column grid of cardsHorizontal-scroll carousel or vertical stack with different priority
Wide hero with image rightStacked hero with image full-width below
Dense tableCard-per-row with key fields prioritized

Narrow columns are valid

A common mistake: making content full-width because the viewport allows it. A 2400px-wide article is unreadable; 65 characters per line is the sweet spot for prose (line-length-tracking).

.article {
  max-width: 65ch; /* or 720px */
  margin: 0 auto;
  padding: 0 24px;
}

Blog content, documentation, long-form reading — these often benefit from a narrow central column even on a 4K monitor. Don't fill space just because it's there.

12-column grids as foundation

The 12-column grid is the most flexible base because 12 divides into 1, 2, 3, 4, 6, 12. You can have a one-third / two-thirds split, a quarter / three-quarters, a six-column gallery, etc.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.hero { grid-column: span 12; }
.feature { grid-column: span 4; }
.sidebar { grid-column: span 3; }
.main { grid-column: span 9; }

Use this as the foundation. Then break it intentionally for delight.

Break the grid (deliberately)

Small graphical elements that escape the grid signal craft — a quote with a hanging punctuation mark in the left margin, an illustration that overlaps a section divider, a callout that bleeds outside the column.

This is a marketing-page move (visual-imperfection). In-product, hold the grid.

Bento layouts (the modern landing-page pattern)

Bento boxes — irregular grid layouts where tiles vary in size and feature their own micro-content — are a 2024–2026 landing-page staple:

[ tall feature ] [ wide visual    ]
                 [ wide visual    ]
[ small ] [ small ] [ small      ]
[ wide quote that bridges 3 cols  ]

When done well, each tile is self-contained, hierarchy is clear from size alone, and the overall layout reads as composed (not random). When done poorly, it reads as a Bootstrap grid that someone broke. Planning the tiles themselves (which are UI, the one hero, neighbours of different kinds, one Stage per tile) is bento-grids.

When to apply

  • Designing any new screen — start with the viewport-specific layouts, not a single desktop comp.
  • Reviewing a "responsive" PR — ask whether mobile was designed or just scaled.
  • Landing pages and marketing pages — bento and break-the-grid live here.

When NOT to apply

  • Forms — single-column, top-to-bottom, no exceptions.
  • Dashboards with comparable widgets — symmetric grid wins for scannability.
  • Content the user reads (long articles, docs) — narrow central column.

Gotcha

Don't apply marketing-grade asymmetry to product UI. Asymmetric grids in a settings page look broken; in a hero, they look intentional. See marketing-vs-product-ui.

Also: viewport-custom design isn't an excuse to ship inconsistency. The components should be consistent across viewports; the composition of components varies. A button looks the same on mobile and desktop; the screen they're on differs.

Sources

layoutresponsiveviewport