---
title: Grid container
description: GridContainer is a flexible CSS Grid wrapper to create responsive layouts with consistent gaps.
category: Layout
related: [Grid, Container, Panel]
commonPatterns: [responsive-layout, dashboard-layout]
---

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

# Grid container

GridContainer makes it simple to arrange content in a responsive CSS grid with built-in spacing tokens and alignment utilities. It's perfect for creating card grids, dashboard layouts, and responsive content arrangements.

## Example

## Props

| Prop           | Type                                                                                                                    | Default value | Description                                                             |
| -------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------- |
| gap            | `'none' \| 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'unset'`                                           | `'inherit'`   | Spacing between grid items using predefined size tokens                 |
| columnGap      | `'none' \| 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'unset'`                                           | `undefined`   | Spacing between grid columns. Overrides gap for columns when specified. |
| rowGap         | `'none' \| 'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl' \| 'unset'`                                           | `undefined`   | Spacing between grid rows. Overrides gap for rows when specified.       |
| alignItems     | `'start' \| 'center' \| 'end' \| 'stretch'`                                                                             | `'stretch'`   | Vertical alignment of items within grid cells (cross-axis alignment)    |
| justifyContent | `'center' \| 'space-between' \| 'space-around' \| 'space-evenly' \| 'start' \| 'stretch' \| 'end' \| 'left' \| 'right'` | `'stretch'`   | Horizontal alignment of items within grid cells (main-axis alignment)   |
| isResponsive   | `boolean`                                                                                                               | `true`        | Whether the grid should adapt its layout based on screen size           |

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

function MyGridContainer() {
return (
  <GridContainer gap="md" gridTemplateColumns="repeat(3, 1fr)">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </GridContainer>
)
}
```

## Quick start

```tsx
import { GridContainer, Panel, Text } from '@clickhouse/click-ui'

function MyGridContainer() {
return (
  <GridContainer gap="md" gridTemplateColumns="repeat(3, 1fr)">
    <Panel hasBorder padding="md">
      <Text>Card 1</Text>
    </Panel>
    <Panel hasBorder padding="md">
      <Text>Card 2</Text>
    </Panel>
    <Panel hasBorder padding="md">
      <Text>Card 3</Text>
    </Panel>
  </GridContainer>
)
}
```

## Related components

- **Grid**: For data table grids with focus management.
- **Container**: For flexbox-based layouts, an alternative to GridContainer.
- **Panel**: Often used within grid containers for card layouts.

## Common use cases

### Responsive layout

```tsx
import { GridContainer, Panel, Text } from '@clickhouse/click-ui'

function ResponsiveLayout() {
return (
  <GridContainer gap="lg" gridTemplateColumns="repeat(auto-fill, minmax(200px, 1fr))">
    <Panel hasBorder padding="md">
      <Text weight="bold">Card 1</Text>
      <Text size="sm">Content</Text>
    </Panel>
    <Panel hasBorder padding="md">
      <Text weight="bold">Card 2</Text>
      <Text size="sm">Content</Text>
    </Panel>
  </GridContainer>
)
}
```

### Dashboard layout

```tsx
import { GridContainer, Panel, Text } from '@clickhouse/click-ui'

function DashboardLayout() {
return (
  <GridContainer gap="md" gridTemplateColumns="2fr 1fr">
    <Panel hasBorder padding="lg">
      <Text size="lg" weight="bold">Main Content</Text>
      <Text>Primary dashboard content</Text>
    </Panel>
    <Panel hasBorder padding="lg">
      <Text size="lg" weight="bold">Sidebar</Text>
      <Text>Secondary content</Text>
    </Panel>
  </GridContainer>
)
}
```