Skip to content
MIZU.

Grid

Responsive columns that make room for the content without breakpoint bookkeeping.

Live — this one is real

Forms

16

Status

12

Data

12

Usage

import { Grid, Stat } from "mizu-ui";

export function Example() {
  return (
    <Grid minWidth={160} gap={24}>
      <Stat label="Forms" value="16" />
      <Stat label="Status" value="12" />
      <Stat label="Data" value="12" />
    </Grid>
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect layout/Layout.tsx

Source is included in the npm package under src/layout/Layout.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
minWidth / gapnumber220 / 24Minimum column width and gap in pixels.
...propsHTMLAttributes—Native div attributes.

Accessibility

Native grid automatically collapses within its container. DOM reading order remains intact.

Motion

CSS layout, no resize observer.

Works alongside

StackSplitPaneAspectRatioScrollArea