Zetta v1.6

Foundations

Grid

Every page sits on one responsive grid — 12 columns on desktop, 8 on tablet, 4 on mobile — centred within a 1440px max width. Gutters and margins step up with the breakpoint so layouts breathe on larger screens without sprawling.

Breakpoints

BreakpointFromColumnsGutterMargin
Mobile0px416px16px
Tablet768px824px24px
Desktop1024px1224px24px
Wide1440px1232px48px

The 12-column grid

Place content by column span. A main + sidebar is an 8 + 4 split; three cards are 4 + 4 + 4.

1
2
3
4
5
6
7
8
9
10
11
12

Rules

  • Lay out by span within the 12 columns; let the grid reflow to 8 and 4 columns at the tablet and mobile breakpoints.
  • Don't nest a second page grid — use a local CSS grid inside a column. Columns set min-width: 0 so content can't blow out the track.
  • Content stays within the 1440px max width, centred, with the breakpoint's margin as the outer gutter.

The layout primitive that applies this grid is the Page grid component.