Geist Design System

Grid

Display elements in a grid layout.

Grid

A non-responsive grid with no cells.

Basic grid

A non-responsive single grid with auto flowing cells configuration.

1
2
3
4
5
6

Solid cells

Using the solid prop on cells will occlude the guides that the cell overlaps

1
2
3
4
5
6

Responsive grid

Grid component with responsive rows and columns props at all 3 breakpoints.

1
2
3
4
5
6

Responsive Grid with responsive guide clipping cells

Grid component with responsive rows and columns props at all 3 breakpoints as well as guide clipping on specific cells.

1 + 2
3
4
5 + 6

Grid with hidden row guides

Grid with hidden column guides

Grid with overlaying cells

Grid component with cells that overlay another in various states.

1
2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at felis
3
4

Specific Grid with Guide Clipping

Grid component with guide clipping enabled on specific cells.

1
2
3
4
5

Best Practices

When to use

  • Use Grid for two-dimensional cell-and-guide layouts in marketing pages, docs landing pages, and feature breakdowns where the rule lines and cell borders are part of the design.
  • For plain n-column responsive content (cards, lists), use Tailwind grid grid-cols-* utilities directly; Grid is overkill when guides aren’t visible.
  • Don’t nest Grids more than one level; the guide overlap reads as visual noise and breaks the cell math.

Behavior

  • Set columns and rows at all three breakpoints so cells reflow predictably between mobile, tablet, and desktop.
  • Use solid cells to occlude guides behind a tile when content needs an opaque background; without it, guides render through the cell.
  • Hide row or column guides only when their absence improves clarity (single-axis layouts, hero rows). Hiding both usually means a plain Tailwind grid is the right tool.

Accessibility

  • Guides are decorative; mark them aria-hidden="true" and let semantics live on cell content.
  • When cells become tappable, give each its own focus ring and keep tab order matching reading order.
  • Confirm guide contrast on both themes; the default tokens are tuned, but custom borders can drop below the 3:1 minimum.