---
title: Grid
description: Grid in Click UI is a responsive grid layout component that helps you create flexible and consistent layouts.
category: Layout
related: [GridContainer, Container, Panel]
commonPatterns: [responsive-grid, card-grid, image-grid]
---

Source: https://clickhouse.design/click-ui/grid

# Grid

A responsive grid layout component that helps you create flexible and consistent layouts. Grid is ideal for data tables, card layouts, and structured content displays.

## Example

## Props

| Prop    | Type     | Default value | Description                                           |
| ------- | -------- | ------------- | ----------------------------------------------------- |
| columns | `number` | `3`           | Number of columns in the grid layout                  |
| gap     | `string` | `"16px"`      | Gap spacing between grid items (e.g., "16px", "1rem") |
| width   | `string` | `"100%"`      | Width of the grid container (e.g., "100%", "800px")   |

```tsx
import { Grid } from '@clickhouse/click-ui'

<div style={{ height: 500, width: '100%' }}>
<Grid
  rowStart={currentPage * rowCount}
  columnCount={columnCount}
  rowCount={rowCount}
  cell={Cell}
  headerHeight={32}
  getMenuOptions={getMenuOptions}
  focus={focus}
  onFocusChange={(row, column) => setFocus({ row, column })}
/>
<Pagination
  currentPage={currentPage}
  onChange={setCurrentPage}
  totalPages={5}
/>
</div>
```

## Quick start

```tsx
import { Grid } from '@clickhouse/click-ui'

function MyGrid() {
return (
  <div style={{ height: 500, width: '100%' }}>
    <Grid
      rowStart={0}
      columnCount={5}
      rowCount={10}
      cell={Cell}
      headerHeight={32}
      focus={focus}
      onFocusChange={(row, column) => setFocus({ row, column })}
    />
  </div>
)
}
```

## Related components

- **GridContainer**: For CSS Grid-based layouts with flexible column definitions.
- **Container**: For flexbox-based layouts, an alternative to Grid.
- **Panel**: Often used within grid cells for card layouts.

## Common use cases

### Responsive grid

Grid is commonly used for data tables and structured content. See the example above for a complete implementation.

```tsx
import { Grid, Pagination } from '@clickhouse/click-ui'
import { useState } from 'react'

function ResponsiveGrid() {
const [currentPage, setCurrentPage] = useState(0)
const [focus, setFocus] = useState({ row: 0, column: 0 })

return (
  <div style={{ height: 500, width: '100%' }}>
    <Grid
      rowStart={currentPage * 10}
      columnCount={5}
      rowCount={10}
      cell={Cell}
      headerHeight={32}
      focus={focus}
      onFocusChange={(row, column) => setFocus({ row, column })}
    />
    <Pagination
      currentPage={currentPage}
      onChange={setCurrentPage}
      totalPages={5}
    />
  </div>
)
}
```