Skip to main content
npm install @zendeskgarden/react-grid
npm install react react-dom styled-components @zendeskgarden/react-theming

​
Grid

The Grid component is a flexbox-based 12-column grid inspired by Bootstrap’s grid system. Column spans and gutter widths are controlled via props. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Grid } from '@zendeskgarden/react-grid';

<ThemeProvider>
  <Grid>
    <Grid.Row>
      <Grid.Col md={4}>One third</Grid.Col>
      <Grid.Col md={4}>One third</Grid.Col>
      <Grid.Col md={4}>One third</Grid.Col>
    </Grid.Row>
    <Grid.Row>
      <Grid.Col md={6}>Half</Grid.Col>
      <Grid.Col md={6}>Half</Grid.Col>
    </Grid.Row>
  </Grid>
</ThemeProvider>

​
Grid props

​
columns
number
default:"12"
Total number of columns in the grid.
​
gutters
string | false
Gutter size between columns. Accepts theme spacing values or false to remove gutters.
​
debug
boolean
Highlights column boundaries for layout debugging.

​
Grid.Col props

​
xs | sm | md | lg | xl
number | 'auto'
Column span at the given breakpoint (1–12, or 'auto').
​
offset
number
Number of columns to offset the column from the left.
​
order
number | 'first' | 'last'
CSS flex order for the column.

​
Pane

PaneProvider and Pane enable resizable split-pane layouts using CSS Grid or Flexbox. Draggable Pane.Splitter handles let users resize panes interactively. 
import { ThemeProvider } from '@zendeskgarden/react-theming';
import { PaneProvider, Pane } from '@zendeskgarden/react-grid';

<ThemeProvider>
  <PaneProvider
    totalPanesHeight={600}
    totalPanesWidth={1000}
    defaultColumnValues={{ 'col-1': 1, 'col-2': 1 }}
    defaultRowValues={{ 'row-1': 1 }}
  >
    {({ getGridTemplateColumns, getGridTemplateRows }) => (
      <div
        style={{
          display: 'grid',
          width: '1000px',
          height: '600px',
          gridTemplateRows: getGridTemplateRows(),
          gridTemplateColumns: getGridTemplateColumns()
        }}
      >
        <Pane>
          <Pane.Content>Left pane</Pane.Content>
          <Pane.Splitter layoutKey="col-1" min={0} max={2} orientation="end" />
        </Pane>
        <Pane>
          <Pane.Content>Right pane</Pane.Content>
        </Pane>
      </div>
    )}
  </PaneProvider>
</ThemeProvider>

​
PaneProvider props

​
totalPanesWidth
number
required
Total pixel width available for all panes.
​
totalPanesHeight
number
required
Total pixel height available for all panes.
​
defaultColumnValues
Record<string, number>
Initial fr unit values for each named column splitter.
​
defaultRowValues
Record<string, number>
Initial fr unit values for each named row splitter.

​
Pane.Splitter props

​
layoutKey
string
required
Unique key matching a column or row value defined in PaneProvider.
​
min
number
required
Minimum fr size for the pane.
​
max
number
required
Maximum fr size for the pane.
​
orientation
'start' | 'end' | 'top' | 'bottom'
required
Which edge of the pane the splitter is attached to.
Pane uses the ResizeObserver API, which is not available in Node.js. Polyfill it when running tests with Jest.

Build docs developers (and LLMs) love

Get started for freeTalk to us