Garden 9 is now available.
The website has been updated to the latest major version. View previous versions
Skip to main content
Content
Design
Components
Patterns
    • Introduction
      • Overview
    • Foundations
      • Bedrock CSS
      • Design tokens
      • Containers
      • Theming
      • Versions
    • Components
      • Accordion
      • Anchor
      • Avatar
      • Breadcrumbs
      • Buttons
      • Chrome
      • Code block
      • Color picker
      • Color swatch
      • Date picker
      • Draggable
      • Drawer
      • Forms
      • Grid
      • Loaders
      • Menu
      • Modal
      • Notification
      • Pagination
      • Pane
      • Sheet
      • Status indicator
      • Stepper
      • Table
      • Tabs
      • Tags
      • Tiles
      • Timeline
      • Tooltip
      • Tooltip dialog
      • Typography
      • Well
    Table of Contents
    • How to use it
      • Auto layout
      • Responsive layouts
      • Alignment
      • Offsetting columns
      • Nesting
    • Configuration
    • API
      • Grid

    Grid

    The Grid component is a framework for building modular layouts.

    Table of Contents
    • How to use it
      • Auto layout
      • Responsive layouts
      • Alignment
      • Offsetting columns
      • Nesting
    • Configuration
    • API
      • Grid
    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

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Equal-width multi-row

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Setting one column width

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Variable width content

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Responsive layouts

    All breakpoints

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Stacked to horizontal

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Alignment

    Vertical alignment

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Horizontal alignment

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    No gutters

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Column wrapping

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Column breaks

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Offsetting columns

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Nesting

    Toggle dark mode
    Set primary hue
    Toggle RTL
    Open in CodeSandbox
    Copy code
    View code

    Configuration

    • Name9.1.0•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 nameTypeDefaultDescription
    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 nameTypeDefaultDescription
    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 nameTypeDefaultDescription
    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

    Garden is the design system by Zendesk.
    BlogGitHubVersions
    © Zendesk 2024