Grid is installed into your project as a file you own. It gives you Row and Col, with the same props as Ant Design v6's, and the useBreakpoint hook. Neither component paints anything. They forward a ref, which is the row marked antuikit in each API table below, and merge the class name through cn().
Install
npx antuikit@latest init
npx antuikit@latest add grid
The first command installs AntuikitProvider and the theme tokens, including the breakpoints your lg: classes use. The second adds this component.
Import
From @/components/ui/grid, never from antd. The file lives in your project, so the import is a path, not a package. Grid groups the other three.
import { Grid, useBreakpoint, Col, Row } from "@/components/ui/grid"
The axes
Two props take a fixed set of values, and both are on Row. A Col takes numbers.
justify takes start, end, center, space-around, space-between and space-evenly, and distributes whatever main-axis space the spans leave over.
align takes top, middle, bottom and stretch, where Flex takes CSS values like flex-start. With no align, columns stretch to the tallest one.
Each also accepts a responsive object keyed by breakpoint, so justify={{ xs: "center", md: "space-between" }} is valid.
Everything else is a number in the 24-column system: span, offset, push, pull and order on a Col, and gutter on a Row.
Flags
One, on Row: wrap, which defaults to true. Cols whose spans add up past 24 fall onto a new line.
wrap={false} keeps every Col on one line, so content that would have wrapped overflows. Use it only when you also control the content width, and give a Col a minWidth of 0 if its content will not shrink. A Col with flex already gets one.
Slots
Neither Row nor Col declares a prop typed as a node. There is one place your markup goes, and it is children: Cols inside a Row, your own content inside a Col.
A Col can hold another Row. The inner Row starts its own 24 columns across the width of that Col.
<Row gutter={[16, 16]}>
<Col xs={24} md={16}>
<Row gutter={16}>
<Col span={12}>{/* half of the 16, not of the 24 */}</Col>
<Col span={12} />
</Row>
</Col>
<Col xs={24} md={8} />
</Row>
Events
Neither component declares an event handler of its own. Both prop types extend React.HTMLAttributes<HTMLDivElement>, though, so every DOM handler is available and is spread onto the <div>. The API tables below list only the grid's own props.
A layout element is rarely the right place for one. A click on a Col is a click on the whole cell, including its padding, with no role and no keyboard equivalent. Put the handler on a real button or link inside it.
useBreakpoint
Tells JavaScript which breakpoints match, for choices CSS cannot make: how many items to fetch, or whether to render a Drawer instead of a Modal. It returns the seven breakpoint keys, each true while that breakpoint matches.
import { useBreakpoint } from "@/components/ui/grid";
const screens = useBreakpoint();
return screens.md ? <DataTable /> : <CardList />;
It is Ant Design's hook, re-exported as is. It reads the live screen* tokens, which is why a theme file may not set them: the Tailwind breakpoints are written at build time and would no longer match.
Prefer a span or a Tailwind variant where either will do. The hook has no value on the server, so a layout decided with it renders its fallback first and changes after hydration, and it re-renders on every breakpoint change.
Styling
Row and Col have no classNames or styles props, since each is a single <div>. className and style land on that div.
API Reference
Col
Col's props. Rows marked antuikit in the Version column are added by the kit.
Row
Row's props. Rows marked antuikit in the Version column are added by the kit.