GridContainer

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

Item 1

Item 2

Item 3

Props

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

Quick Start

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>
)
}

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

Card 1

Content for card 1

Card 2

Content for card 2

Card 3

Content for card 3

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

Main Content

Primary dashboard content area

Sidebar

Secondary content area

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>
)
}

Grid Panel