Grid
The Grid component is a framework for building modular layouts.
Table of Contents
Used for this
- To structure the layout of a page
How to use it
The Grid component is modeled on Bootstrap’s Grid system. The following examples link to corresponding Bootstrap documentation and demonstrate how advanced layouts can be achieved using Grid.
Auto layout
Equal column widths
Equal-width multi-row
Setting one column width
Variable width content
Responsive layouts
All breakpoints
Stacked to horizontal
Alignment
Vertical alignment
Horizontal alignment
No gutters
Column wrapping
Column breaks
Offsetting columns
Nesting
Configuration
- Name9.0.0-next.26•View source•View on npm
- Installnpm install @zendeskgarden/react-grid
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Grid } from '@zendeskgarden/react-grid'
API
Grid
| Prop name | Type | Default | Description |
|---|---|---|---|
columns | string | number | 12 | Defines the number of individual columns that the grid contains |
debug | boolean | Highlights the columns for layout debugging | |
gutters | false | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxs' | 'xxl' | 'md' | Specifies the grid column gutter width. The value false collapses the gutters |
Grid.Col
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
alignSelf | 'end' | 'start' | 'auto' | 'center' | 'baseline' | 'stretch' | Applies the align-self flex item property, overriding Row alignItems vertical alignment on all screen sizes | |
alignSelfLg | 'end' | 'start' | 'auto' | 'center' | 'baseline' | 'stretch' | Applies the align-self flex item property to the column on large screens | |
alignSelfMd | 'end' | 'start' | 'auto' | 'center' | 'baseline' | 'stretch' | Applies the align-self flex item property to the column on medium screens | |
alignSelfSm | 'end' | 'start' | 'auto' | 'center' | 'baseline' | 'stretch' | Applies the align-self flex item property to the column on small screens | |
alignSelfXl | 'end' | 'start' | 'auto' | 'center' | 'baseline' | 'stretch' | Applies the align-self flex item property to the column on extra-large screens | |
alignSelfXs | 'end' | 'start' | 'auto' | 'center' | 'baseline' | 'stretch' | Applies the align-self flex item property to the column on extra-small screens | |
lg | string | number | boolean | Defines the column size on large screens | |
md | string | number | boolean | Defines the column size on medium screens | |
offset | string | number | Offsets the column relative to the total number of columns in the grid on all screen sizes | |
offsetLg | string | number | Applies offset to the column on large screens | |
offsetMd | string | number | Applies offset to the column on medium screens | |
offsetSm | string | number | Applies offset to the column on small screens | |
offsetXl | string | number | Applies offset to the column on extra-large screens | |
offsetXs | string | number | Applies offset to the column on extra-small screens | |
order | string | number | Applies the order flex item property to the column on all screen sizes. Note that order modification can introduce accessibility problems by confusing tab ordering. Rely on semantic DOM ordering whenever possible. | |
orderLg | string | number | Sets the order flex item property of the column on large screens | |
orderMd | string | number | Sets the order flex item property of the column on medium screens | |
orderSm | string | number | Sets the order flex item property of the column on small screens | |
orderXl | string | number | Sets the order flex item property of the column on extra-large screens | |
orderXs | string | number | Sets the order flex item property of the column on extra-small screens | |
size | string | number | Sets the total number of grid columns that the column spans on all screen sizes | |
sm | string | number | boolean | Defines the column size on small screens | |
textAlign | 'end' | 'start' | 'center' | 'justify' | Applies the RTL-aware text-align property to the column on all screen sizes | |
textAlignLg | 'end' | 'start' | 'center' | 'justify' | Applies the text-align property to the column on large screens | |
textAlignMd | 'end' | 'start' | 'center' | 'justify' | Applies the text-align property to the column on medium screens | |
textAlignSm | 'end' | 'start' | 'center' | 'justify' | Applies the text-align property to the column on small screens | |
textAlignXl | 'end' | 'start' | 'center' | 'justify' | Applies the text-align property to the column on extra-large screens | |
textAlignXs | 'end' | 'start' | 'center' | 'justify' | Applies the text-align property to the column on extra-small screens | |
xl | string | number | boolean | Defines the column size on extra-large screens | |
xs | string | number | boolean | Defines the column size on extra-small screens. See breakpoints. |
Grid.Row
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
alignItems | 'end' | 'start' | 'center' | 'baseline' | 'stretch' | Applies the align-items flex container property to the row. This affects vertical Col alignment on all screen sizes. | |
alignItemsLg | 'end' | 'start' | 'center' | 'baseline' | 'stretch' | Applies the align-items flex container property to the row on large screens | |
alignItemsMd | 'end' | 'start' | 'center' | 'baseline' | 'stretch' | Applies the align-items flex container property to the row on medium screens | |
alignItemsSm | 'end' | 'start' | 'center' | 'baseline' | 'stretch' | Applies the align-items flex container property to the row on small screens | |
alignItemsXl | 'end' | 'start' | 'center' | 'baseline' | 'stretch' | Applies the align-items flex container property to the row on extra-large screens | |
alignItemsXs | 'end' | 'start' | 'center' | 'baseline' | 'stretch' | Applies the align-items flex container property to the row on extra-small screens | |
justifyContent | 'end' | 'start' | 'center' | 'between' | 'around' | Applies the justify-content flex container property to the row. This affects horizontal Col alignment on all screen sizes. | |
justifyContentLg | 'end' | 'start' | 'center' | 'between' | 'around' | Applies the justify-content flex container property to the row on large screens | |
justifyContentMd | 'end' | 'start' | 'center' | 'between' | 'around' | Applies the justify-content flex container property to the row on medium screens | |
justifyContentSm | 'end' | 'start' | 'center' | 'between' | 'around' | Applies the justify-content flex container property to the row on small screens | |
justifyContentXl | 'end' | 'start' | 'center' | 'between' | 'around' | Applies the justify-content flex container property to the row on extra-large screens | |
justifyContentXs | 'end' | 'start' | 'center' | 'between' | 'around' | Applies the justify-content flex container property to the row on extra-small screens | |
wrap | 'wrap' | 'nowrap' | 'wrap-reverse' | Applies the flex-wrap container property to the row. This affects Col wrapping on all screen sizes. | |
wrapLg | 'wrap' | 'nowrap' | 'wrap-reverse' | Applies the flex-wrap container property to the row on large screens | |
wrapMd | 'wrap' | 'nowrap' | 'wrap-reverse' | Applies the flex-wrap container property to the row on medium screens | |
wrapSm | 'wrap' | 'nowrap' | 'wrap-reverse' | Applies the flex-wrap container property to the row on small screens | |
wrapXl | 'wrap' | 'nowrap' | 'wrap-reverse' | Applies the flex-wrap container property to the row on extra-large screens | |
wrapXs | 'wrap' | 'nowrap' | 'wrap-reverse' | Applies the flex-wrap container property to the row on extra-small screens |