Grid

This component has been deprecated

See the Grid component in Garden's @zendeskgarden/react-grid package for the latest updates.

@zendeskgarden/css-grid is an opinionated customization of the Bootstrap v4 flexbox grid. All classes are consistent with the Bootstrap Grid Documentation.

You can enable RTL layouts by using the .is-rtl class with the .container or .container-fluid wrapper classes.

Mobile-Responsive Columns

one of three columns

two of three columns

three of three columns

Setting One Column Width

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

Variable Width Content

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

Playground

<div class="container-fluid is-debug">
  <div class="row">
    <div class="col-md-4">
      one of three
    </div>
    <div class="col-md-4">
      two of three
    </div>
    <div class="col-md-4">
      three of three
    </div>
  </div>
</div>