Grid
gridDefines type-safe polymorphic grid columns through the 2xl breakpoint with gaps and child row or column spans.
Usage
Basic usage
cols passes the number to fix the number of columns, gap controls the row and column spacing in units of 0.25rem.
<Grid cols={3} gap={3}>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</Grid>Cross column
Make cells span multiple columns using colSpan of GridItem.
<Grid cols={3} gap={3}>
<GridItem colSpan={2}>across 2 columns</GridItem>
<div>3</div>
<div>4</div>
<GridItem colSpan={2}>across 2 columns</GridItem>
</Grid>Responsive columns
cols passes {base, sm, md, lg}, and press the breakpoint to switch the column number (static Tailwind class).
<Grid cols={{ base: 1, sm: 2, md: 3 }} gap={3}>
{items.map((it) => <Card key={it.id} {...it} />)}
</Grid>Separation of row and row spacing
colGap / rowGap can cover gap respectively to create different horizontal and vertical spacing.
<Grid cols={3} colGap={4} rowGap={2}>
{/* 1rem between columns, 0.5rem between rows */}
</Grid>When to use
Use Grid for two-dimensional layouts such as fixed-column forms, card collections, or arrangements with items that span rows and columns. Use GridItem to set colSpan and rowSpan. Choose Stack for a single row or column, or Spacer when only directional whitespace is needed.
Import
import { Grid, GridItem } from "@hulianui/ui"Props
Grid
| Name | Type | Default | Description |
|---|---|---|---|
| cols | number | ResponsiveCols | 1 | Column count. A number creates any fixed count through inline styles; { base, sm, md, lg, xl, 2xl } uses static responsive classes. |
| rows | number | — | Explicit row count; omit it to let content create rows automatically. |
| gap | number | 0 | Row and column gap (× 0.25rem). |
| colGap | number | — | Column gap, overriding the column component of gap (× 0.25rem). |
| rowGap | number | — | Row gap, overriding the row component of gap (× 0.25rem). |
| inline | boolean | false | Uses inline-grid instead of grid. |
| as | ElementType | "div" | Element type rendered by Grid. |
GridItem
| Name | Type | Default | Description |
|---|---|---|---|
| colSpan | number | — | Number of columns spanned. |
| rowSpan | number | — | Number of rows spanned. |
| as | ElementType | "div" | Element type rendered by GridItem. |
Both components forward the remaining HTMLAttributes<HTMLElement> to their rendered element.
Slots
Grid
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Grid contents. |
GridItem
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Content of the grid item. |
Responsive values cover every Tailwind breakpoint: base / sm / md / lg / xl / 2xl. Wide admin layouts often need to change columns at xl (1280 px and above); stopping at lg forced consumers to split one layout between props and className (hulianui/hulian#61). For example: cols={{ base: 1, xl: 4, "2xl": 6 }}.
Usage guidelines
Pass a number to cols for an arbitrary fixed count. Pass { base, sm, md, lg, xl, 2xl } when the count should change at responsive breakpoints. Layout-specific issues involving page centering, card action rows, or collapsible tracks are outside this primitive's contract.
as is type-polymorphic
Properties and event types follow the element selected by as: as="form" gives onSubmit a FormEvent<HTMLFormElement>, while as="a" accepts href. Older typings reduced event.currentTarget to HTMLElement, forcing consumers to cast away the exact type safety that polymorphism should provide (hulianui/hulian#62).
Related
Playground
<Grid cols={3} gap={3}>
<div>1</div>
<GridItem colSpan={2}>across 2 columns</GridItem>
</Grid>