@edux-design/grid

Responsive Grid components with a declarative API inspired by Zendesk Garden (@zendeskgarden/react-grid), implemented with Tailwind classes and lightweight inline styles for dynamic guttering and fractional widths.

Install

npm i @edux-design/grid

Usage

import { Grid, Row, Col } from "@edux-design/grid";

export function Example() {
  return (
    <Grid gutterWidth={24}>
      <Row justifyContent="between" alignItems="center">
        <Col sm={12} md={6}>Left</Col>
        <Col sm={12} md={6}>Right</Col>
      </Row>
      <Row>
        <Col xs={12} sm={6} md={4} lg={3}>
          One
        </Col>
        <Col xs={12} sm={6} md={4} lg={3}>
          Two
        </Col>
      </Row>
    </Grid>
  );
}

API (Garden‑like)

Grid

• fluid?: boolean — full width container when true. Default false.
• gutterWidth?: number — gutter in px. Default 24.
• debug?: boolean — outlines grid for debugging.

Row

• wrap?: boolean — enable flex wrapping. Default true.
• alignItems?: 'start'|'center'|'end'|'stretch'|'baseline'
• justifyContent?: 'start'|'center'|'end'|'around'|'between'|'evenly'
• alignContent?: 'start'|'center'|'end'|'around'|'between'|'evenly'|'stretch'
• gutterWidth?: number — override Grid gutter.
• debug?: boolean

Col

• Breakpoint sizes: xs|sm|md|lg|xl?: number|'auto' — spans 1–12 or auto.
• Breakpoint offsets: xsOffset|smOffset|mdOffset|lgOffset|xlOffset?: number
• textAlign?: 'start'|'center'|'end'
• debug?: boolean

Notes

• Tailwind responsive prefixes are used (e.g. sm:, md:). Arbitrary percentage widths are generated via Tailwind’s arbitrary values (e.g. md:basis-[33.3333%]). Gutters use inline styles for precise control and do not require Tailwind config.