Layout cheat sheet

Containers, columns, content width and responsive behaviour across viewports.

AtlassianAppleMaterialGOV.UKSGDS5 rules, updated 7 Oct 2026Verified 7 Oct 2026

Viewport: All

Viewport references are useful starting points. Design breakpoints should respond to the content, not specific device models. Choosing a viewport changes what is emphasised; nothing is hidden.

In 30 seconds

One column on mobile, two to four on desktop
Give content a maximum width; let margins take the rest
Reading text and forms should be much narrower than the page
Align to a few shared edges
More space does not mean more columns

Shortcut's summary of this sheet. The detail, the reasoning and the sources are below.

Structure

Alignment

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Pick a small number of strong vertical lines, usually the left edge of the content, and hang everything from them.

Why?

Shared edges are what make a screen look designed. The eye notices a 3 px misalignment even when it cannot name it.

Common mistakes (4)

Header content and page content on different left edges.
Offsets of 3 to 5 px between things that should line up.
Centred headings over left-aligned content.
Icons aligned by their bounding box, not their visual weight.

Senior designer note“Random 3–5px offsets are usually a symptom of inconsistent structure.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Safe starting point

2–4 columns

Columns

Industry conventionShortcut editorial, reviewed 9 Oct 2026

Applies to Mobile to large desktop

How many columns of content sit side by side. More available space does not automatically mean adding more columns.

Mobile

1 column

Tablet

1–2 columns

Desktop

2–4 columns

Six items reflowing as the frame widens. On the large frame the column count holds and the margins grow instead.

Mobile: 1 column
Tablet: 1–2 columns
Laptop: 2–3 columns
Desktop: 2–4 columns
Large desktop: Hold the count; cap the width

Depends on what each column holds, minimum useful width of one item, whether items are compared or read. A starting point, not a correct value.

Why?

A column is useful while each item in it stays wide enough to read. Past that, extra columns make every item worse.

When to deviate. Dense grids of small, uniform items, such as thumbnails, can go well past four. Long text should stay in one column at any width.

Common mistakes (2)

A column added at every breakpoint until cards are too narrow for their titles.
Columns that keep multiplying on a very wide screen instead of a maximum width.

Senior designer note“Decide the narrowest a card can be and still work. The column count follows from that.”

Official guidanceAtlassianAppleMaterial

Atlassian
The grid has 2 columns from 320 px, 6 from 480 px and 12 from 1024 px.
Atlassian Design System, Grid(opens in a new tab)Design-system convention
Apple
On iPhone Duo a split view expands on the inner display and collapses to a single pane on the outer display. In a grid, prefer an even number of columns so content divides cleanly at the fold.
Apple HIG, Designing for iPhone Duo(opens in a new tab)Design-system convention
Applies to foldable
Material
A large unfolded foldable in landscape is like a tablet, and a two-pane layout makes good use of the width. Folded, a single column is straightforward and effective.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention
Applies to foldable

Safe starting point

1200–1440 px

Content width

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

The maximum width content grows to before the margins take the rest.

Mobile: Full width, inside the page margins
Tablet: Full width, inside the page margins
Laptop: Full width up to the maximum
Desktop: 1200–1440 px maximum
Large desktop: Hold the maximum; let the margins grow

Depends on what the content is, whether people read or scan it. A starting point, not a correct value.

Common range 1200–1440 for application layouts, 600–760 for reading columns

Wide: Application shell. Can use a wide, responsive layout that follows the viewport.
600–760: Reading content. A constrained maximum width, whatever the screen.
Narrow: Forms. Inputs sized to their answers. Do not stretch fields across a very wide screen.
Wide: Dashboards. A wider grid, still capped so related panels stay near one another.

Why?

Past a point, extra width only stretches lines and spreads related things apart.

When to deviate. Data tables and canvases can use the full width. Forms and articles should be much narrower.

Official guidanceGOV.UKSGDSAtlassian

GOV.UK
Default maximum page width is 1020 px; prefer a two-thirds column for readability.
GOV.UK Design System, Layout, and GOV.UK Frontend Sass API ($govuk-breakpoints)(opens in a new tab)Design-system convention
SGDS
Deliver at least 320, 768 and 1440 px layouts.
SGDS, Layout, Breakpoint(opens in a new tab)Design-system convention
Atlassian
A fixed-wide grid has a maximum width of 1296 px. A fixed-narrow grid, for long-form reading, has a maximum of 864 px.
Atlassian Design System, Grid(opens in a new tab)Design-system convention

Hierarchy

Visual hierarchy

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

On any screen, one thing should be most important, a few things second, and the rest quiet. Squint: what you still see is your hierarchy.

Why?

People decide where to look in under a second. If the screen does not decide for them, they scan everything.

Common mistakes (3)

Three buttons of equal weight.
Every card with its own bold heading, icon and badge.
Emphasis added to the weak element when the fix is to quieten the strong ones.

Senior designer note“If everything is equally prominent, nothing is prominent.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Spacing shows what belongs together

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Related things sit closer together than unrelated things. Decide the groups first, then let the gaps follow.

Why?

People read proximity as relationship before they read any label. Even spacing removes that signal.

When to use it

Inside a group: the smallest gaps.
Between groups: clearly larger, at least one step up the scale.
Between sections: larger again.

Common mistakes (2)

A heading that sits midway between two blocks, so it belongs to neither.
Whitespace added to feel premium, with no structure behind it.

Senior designer note“Spacing should communicate relationships, not just make a screen feel airy.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

In 30 seconds

One column on mobile, two to four on desktop

Give content a maximum width; let margins take the rest

Reading text and forms should be much narrower than the page

Align to a few shared edges

More space does not mean more columns

Shortcut's summary of this sheet. The detail, the reasoning and the sources are below.

Structure

Alignment

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Pick a small number of strong vertical lines, usually the left edge of the content, and hang everything from them.

Why?

Shared edges are what make a screen look designed. The eye notices a 3 px misalignment even when it cannot name it.

Common mistakes (4)

Header content and page content on different left edges.
Offsets of 3 to 5 px between things that should line up.
Centred headings over left-aligned content.
Icons aligned by their bounding box, not their visual weight.

Senior designer note“Random 3–5px offsets are usually a symptom of inconsistent structure.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Safe starting point

2–4 columns

Columns

Industry conventionShortcut editorial, reviewed 9 Oct 2026

Applies to Mobile to large desktop

How many columns of content sit side by side. More available space does not automatically mean adding more columns.

Mobile

1 column

Tablet

1–2 columns

Desktop

2–4 columns

Six items reflowing as the frame widens. On the large frame the column count holds and the margins grow instead.

Mobile: 1 column
Tablet: 1–2 columns
Laptop: 2–3 columns
Desktop: 2–4 columns
Large desktop: Hold the count; cap the width

Depends on what each column holds, minimum useful width of one item, whether items are compared or read. A starting point, not a correct value.

Why?

A column is useful while each item in it stays wide enough to read. Past that, extra columns make every item worse.

When to deviate. Dense grids of small, uniform items, such as thumbnails, can go well past four. Long text should stay in one column at any width.

Common mistakes (2)

A column added at every breakpoint until cards are too narrow for their titles.
Columns that keep multiplying on a very wide screen instead of a maximum width.

Senior designer note“Decide the narrowest a card can be and still work. The column count follows from that.”

Official guidanceAtlassianAppleMaterial

Atlassian
The grid has 2 columns from 320 px, 6 from 480 px and 12 from 1024 px.
Atlassian Design System, Grid(opens in a new tab)Design-system convention
Apple
On iPhone Duo a split view expands on the inner display and collapses to a single pane on the outer display. In a grid, prefer an even number of columns so content divides cleanly at the fold.
Apple HIG, Designing for iPhone Duo(opens in a new tab)Design-system convention
Applies to foldable
Material
A large unfolded foldable in landscape is like a tablet, and a two-pane layout makes good use of the width. Folded, a single column is straightforward and effective.
Android Developers, Learn about foldables(opens in a new tab)Design-system convention
Applies to foldable

Safe starting point

1200–1440 px

Content width

Industry conventionShortcut editorial, reviewed 7 Oct 2026

Applies to Mobile to large desktop

The maximum width content grows to before the margins take the rest.

Mobile: Full width, inside the page margins
Tablet: Full width, inside the page margins
Laptop: Full width up to the maximum
Desktop: 1200–1440 px maximum
Large desktop: Hold the maximum; let the margins grow

Depends on what the content is, whether people read or scan it. A starting point, not a correct value.

Common range 1200–1440 for application layouts, 600–760 for reading columns

Wide: Application shell. Can use a wide, responsive layout that follows the viewport.
600–760: Reading content. A constrained maximum width, whatever the screen.
Narrow: Forms. Inputs sized to their answers. Do not stretch fields across a very wide screen.
Wide: Dashboards. A wider grid, still capped so related panels stay near one another.

Why?

Past a point, extra width only stretches lines and spreads related things apart.

When to deviate. Data tables and canvases can use the full width. Forms and articles should be much narrower.

Official guidanceGOV.UKSGDSAtlassian

GOV.UK
Default maximum page width is 1020 px; prefer a two-thirds column for readability.
GOV.UK Design System, Layout, and GOV.UK Frontend Sass API ($govuk-breakpoints)(opens in a new tab)Design-system convention
SGDS
Deliver at least 320, 768 and 1440 px layouts.
SGDS, Layout, Breakpoint(opens in a new tab)Design-system convention
Atlassian
A fixed-wide grid has a maximum width of 1296 px. A fixed-narrow grid, for long-form reading, has a maximum of 864 px.
Atlassian Design System, Grid(opens in a new tab)Design-system convention

Hierarchy

Visual hierarchy

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

On any screen, one thing should be most important, a few things second, and the rest quiet. Squint: what you still see is your hierarchy.

Why?

People decide where to look in under a second. If the screen does not decide for them, they scan everything.

Common mistakes (3)

Three buttons of equal weight.
Every card with its own bold heading, icon and badge.
Emphasis added to the weak element when the fix is to quieten the strong ones.

Senior designer note“If everything is equally prominent, nothing is prominent.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Spacing shows what belongs together

Craft guidanceShortcut editorial, reviewed 7 Oct 2026

Applies to All viewports

Related things sit closer together than unrelated things. Decide the groups first, then let the gaps follow.

Why?

People read proximity as relationship before they read any label. Even spacing removes that signal.

When to use it

Inside a group: the smallest gaps.
Between groups: clearly larger, at least one step up the scale.
Between sections: larger again.

Common mistakes (2)

A heading that sits midway between two blocks, so it belongs to neither.
Whitespace added to feel premium, with no structure behind it.

Senior designer note“Spacing should communicate relationships, not just make a screen feel airy.”

No official source Shortcut tracks sets a rule for this. It is a judgement call.

Layout cheat sheet

Filters

In 30 seconds

Structure

Alignment

Columns

Content width

Hierarchy

Visual hierarchy

Spacing shows what belongs together

When to use it

Layout cheat sheet

Filters

In 30 seconds

Structure

Alignment

Columns

Content width

Hierarchy

Visual hierarchy

Spacing shows what belongs together

When to use it