# antuikit / Grid

> Row, Col and `useBreakpoint`, where Row and Col add nothing beyond `className` merging through `cn()`.

Docs: https://antuikit.com/docs/components/grid

## Install

npx antuikit@latest init
npx antuikit@latest add grid

## Import

import { Col, Row } from "@/components/ui/grid";

## Demos

- [Basic](https://ui.antuikit.com/embed/grid/basic.md): Set `span` on each Col to divide a row of 24 columns, like two halves of `12`, three thirds of `8` or four quarters of `6`.
- [Gutter](https://ui.antuikit.com/embed/grid/gutter-fixed.md): Set `gutter` on a Row to space its columns, as a number of pixels like `16` or a CSS length like `"2rem"`.
- [Responsive gutter](https://ui.antuikit.com/embed/grid/gutter-responsive.md): Pass `gutter` an object keyed by breakpoint to widen the spacing on larger screens, from `8` on a phone to `32` from `lg`.
- [Vertical gutter](https://ui.antuikit.com/embed/grid/gutter-vertical.md): Pass `gutter` a `[horizontal, vertical]` pair, like `[16, 24]`, to space the rows a Row wraps onto as well as its columns.
- [Gutter playground](https://ui.antuikit.com/embed/grid/gutter-playground.md): Pick a gutter and a column count to see `gutter` and `span` together, where N equal columns each take `span={24 / N}`.
- [Offset](https://ui.antuikit.com/embed/grid/offset.md): Set `offset` to move a column right by a number of columns, like `span={12} offset={6}` to center a half-width column.
- [Push and pull](https://ui.antuikit.com/embed/grid/push-pull.md): Set `push` and `pull` to swap where two columns appear without changing the markup, like a sidebar that comes second in code but shows first.
- [Order](https://ui.antuikit.com/embed/grid/order.md): Set `order` on each Col to change the order the columns appear in, here the reverse of the order they are written in.
- [Justify](https://ui.antuikit.com/embed/grid/justify.md): Set `justify` to spread columns along the row: `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, top to bottom.
- [Align](https://ui.antuikit.com/embed/grid/align.md): Set `align` to line up columns of different heights at the `top`, `middle` or `bottom` of the row, or `stretch` them to the tallest one.
- [Flex sizing](https://ui.antuikit.com/embed/grid/flex-stretch.md): Set `flex` on a Col to size it by ratio, like `2` and `3`, or by a CSS flex value, like a `"0 0 12rem"` sidebar beside an `"auto"` column.
- [Responsive spans](https://ui.antuikit.com/embed/grid/responsive.md): Set a span per breakpoint, from `xs={24}` up to `xl={4}`, so the columns go from one per row on a phone to four across on a desktop.
- [Responsive objects](https://ui.antuikit.com/embed/grid/responsive-more.md): Pass a breakpoint an object, like `lg={{ span: 6, offset: 2 }}`, to set `span`, `offset`, `order`, `push`, `pull` or `flex` for that step.
- [Responsive flex](https://ui.antuikit.com/embed/grid/responsive-flex.md): Set `flex` inside a breakpoint object to size columns by percent, like `lg={{ flex: "20%" }}` for five across on a desktop.
- [useBreakpoint](https://ui.antuikit.com/embed/grid/use-breakpoint.md): Call `useBreakpoint` to read which breakpoints match in JavaScript, for choices CSS cannot make, like how many items to load.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/grid`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `Grid` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.