Skip to content
Site volume
Colourway

Components

Grid

Columns by container width, or as many tracks as fit a minimum.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/grid
On this page

Example#

Look of this example
Fernlight
Pebblepath
Live render of examples/grid/basic.tsx

Usage#

Use a grid for columns: a set of cards, a gallery, a form in two columns. Columns follow the width of the grid's container, not the window, so the same grid works in a sidebar and in a full-width section.

  • cols takes a number or breakpoints by container width, such as { base: 1, sm: 2, lg: 4 }.
  • min fits as many tracks as a minimum width allows, such as min="18rem", with no breakpoints at all.
  • gap is a step of the 4 px scale.

Anatomy#

Fernlight
Pebblepath
The parts of examples/grid/basic.tsx, numbered:
  1. GridTracks by container width..mk-grid
  2. TrackEach child takes one track..mk-grid > :first-child

Volume#

Layout only: identical at every volume.

  • Quiet

    Fernlight
    Pebblepath

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    Fernlight
    Pebblepath

    The site default. Art on its own plates, one display moment per view.

  • Press

    Fernlight
    Pebblepath

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Fernlight
    Pebblepath

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Items in a grid should be the same kind of thing at about the same length, so rows line up.

Do and don't#

Do

Fernlight
Pebblepath
Mei Tanaka

Tracks that fit the room.

Don't

Fernlight
Pebblepath
Mei Tanaka

Fixed tracks that overflow on a phone.

Fixed column widths ignore the space they land in. The grid's minimum lets the browser decide how many fit.

Accessibility#

  • Columns follow the nearest container (Container, Section, Main), so a grid in a narrow column stacks even on a wide screen.

Props#

PropTypeDefaultDescription
colsGridColsnone
minstringnoneA track minimum such as "18rem": as many columns as fit.
gapSpaceStep6Default 6 (24 px).
renderRenderPropnone
childrenReactNodenone

Plus 279 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from GridProps in packages/overprint-react/src/reading/grid/grid.tsx.

Tokens#

System tokens (5)

Its own properties (8)

  • --mk-grid-cols
  • --mk-grid-cols-base
  • --mk-grid-cols-lg
  • --mk-grid-cols-md
  • --mk-grid-cols-sm
  • --mk-grid-cols-xl
  • --mk-grid-min
  • --mk-layout-gap

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry