> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/grid.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Grid

Arrange content for different screen widths.

## Basic usage


Design

Develop

Release

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/grid/basic.tsx"
import { Card, Grid } from '@ifhover/leaf-ui';

export function GridBasic() {
  return (
    <Grid columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
      {['Design', 'Develop', 'Release'].map((label) => (
        <Card key={label}>{label}</Card>
      ))}
    </Grid>
  );
}
```

Expand code

## More examples


8 / 24

16 / 24

Responsive width

Hidden on narrow screens

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/grid/advanced.tsx"
import { Card, Col, Row, Space } from '@ifhover/leaf-ui';

export function GridColumns() {
  return (
    <Space direction="vertical" align="stretch">
      <Row gutter={12}>
        <Col span={8}>
          <Card>8 / 24</Card>
        </Col>
        <Col span={16}>
          <Card>16 / 24</Card>
        </Col>
      </Row>
      <Row gutter={12}>
        <Col xs={24} md={12}>
          <Card>Responsive width</Card>
        </Col>
        <Col xs={0} md={12}>
          <Card>Hidden on narrow screens</Card>
        </Col>
      </Row>
    </Space>
  );
}
```

Expand code

## Usage

Grid uses columns for equal-width columns. Row / Col use a 24-column span and offset. Responsive values follow viewport width and inherit values from smaller breakpoints.

## Types

Import these types for data, callbacks and refs.

```ts
import type { ColProps, GridProps, RowProps } from '@ifhover/leaf-ui';
```

## ColProps API

| Property | Type     | Default | Description                            |
| -------- | -------- | ------- | -------------------------------------- |
| `span`   | `number` | `24`    | Column span; Col span 0 hides a column |
| `offset` | `number` | `0`     | Preceding empty columns                |
| `xs`     | `number` | —       | Base breakpoint                        |
| `sm`     | `number` | —       | At 576px and above                     |
| `md`     | `number` | —       | At 768px and above                     |
| `lg`     | `number` | —       | At 992px and above                     |
| `xl`     | `number` | —       | At 1200px and above                    |

## GridProps API

| Property  | Type                                                                      | Default     | Description                                           |
| --------- | ------------------------------------------------------------------------- | ----------- | ----------------------------------------------------- |
| `columns` | `number \| Partial<Record<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl', number>>` | `3`         | Columns; unspecified breakpoints inherit smaller ones |
| `gap`     | `number \| string \| readonly [number \| string, number \| string]`       | `16`        | Gap; tuples use \[vertical, horizontal]               |
| `align`   | `'start' \| 'center' \| 'end' \| 'stretch'`                               | `'stretch'` | Alignment                                             |

## RowProps API

| Property | Type                                        | Default     | Description                                  |
| -------- | ------------------------------------------- | ----------- | -------------------------------------------- |
| `align`  | `'start' \| 'center' \| 'end' \| 'stretch'` | `'stretch'` | Alignment                                    |
| `gutter` | [`GridProps['gap']`](#gridprops-api)        | `16`        | Grid gap; tuples use \[vertical, horizontal] |