@zendeskgarden/react-grid

Components relating to layout grids in the Garden Design System

Usage no npm install needed!

<script type="module">
  import zendeskgardenReactGrid from 'https://cdn.skypack.dev/@zendeskgarden/react-grid';
</script>

README

@zendeskgarden/react-grid npm version

This package includes components relating to layout grids in the Garden Design System.

The Grid component is inspired by the Bootstrap flexbox grid. With Garden, all of the features are dynamic (based on props) – including the number of grid columns and gutter width. The result is an incredibly powerful grid system that will be immediately familiar to users of Bootstrap.

Installation

npm install @zendeskgarden/react-grid

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Grid, Row, Col } from '@zendeskgarden/react-grid';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Grid>
    <Row>
      <Col md={4}>1 of 3</Col>
      <Col md={4}>2 of 3</Col>
      <Col md={4}>3 of 3</Col>
    </Row>
    <Row>
      <Col md={6}>1 of 2</Col>
      <Col md={6}>2 of 2</Col>
    </Row>
  </Grid>
</ThemeProvider>;