Breakpoints, a column grid and maximum widths. The grid has 4 columns on a phone, 8 on a tablet and 12 on a desktop. Text and page content have a maximum width so they stay readable on large screens.
Wide1280px and up · 12 columns · gutter 32px · margin 48px
Rendered preview
The widths to scale
width.text800px
width.text-narrow600px
width.form640px
width.page1440px
Layout
Breakpoints and grid
Use the layout-container and layout-grid classes in globals.css, or the --grid-columns, --grid-gutter and --grid-margin variables, instead of choosing columns and spacing page by page.
Breakpoints
4 values
The screen widths where the layout changes. They are the same as Tailwind's sm, md, lg and xl, so a class such as md:grid-cols-2 changes at the value listed here.
breakpoint.sm640pxLarge phones and up. The grid does not change here; use it for small layout adjustments.
breakpoint.md768pxTablet. The grid goes from 4 to 8 columns.
breakpoint.lg1024pxDesktop. The grid goes to 12 columns.
breakpoint.xl1280pxWide desktop. Gutter and margin grow.
Grid
12 values
Columns, gutter (the space between columns) and margin (the space at the left and right edge) for each screen size. Gutter and margin use values from the spacing scale.
grid.mobile.columns4Columns below 768px.
grid.mobile.gutter16pxSpace between columns below 768px. Same as space.4.
grid.mobile.margin16pxSpace at the left and right edge below 768px. Same as space.4.
grid.tablet.columns8Columns from 768px to 1023px.
grid.tablet.gutter24pxSpace between columns on a tablet. Same as space.6.
grid.tablet.margin24pxSpace at the left and right edge on a tablet. Same as space.6.
grid.desktop.columns12Columns from 1024px to 1279px.
grid.desktop.gutter24pxSpace between columns on a desktop. Same as space.6.
grid.desktop.margin32pxSpace at the left and right edge on a desktop. Same as space.8.
grid.wide.columns12Columns from 1280px.
grid.wide.gutter32pxSpace between columns on a wide screen. Same as space.8.
grid.wide.margin48pxSpace at the left and right edge on a wide screen. Same as space.12.
Widths
Maximum widths
Use the width variables, for example max-w-[var(--width-text)], instead of an arbitrary maximum width.
Maximum widths
4 values
Content is never wider than these. Body text stops at 800px so lines do not become too long to follow.
width.text800pxMaximum width of body text and paragraphs, so lines stay readable.
width.text-narrow600pxMaximum width of short intro text and descriptions under a heading.
width.form640pxWidth of a one-column form.
width.page1440pxMaximum width of the page content on wide screens. The content stays centred.