Grid

The grid component controls the visual layout and spacing between elements on a page or in containers.

Grid creates organized and consistent product layouts, by providing a standard for positioning elements. Grid speeds up the designer-to-developer workflow by improving the consistency of design implementations. Use a Grid to layout and align content by applying standard spacing between elements on a page or within a component.

The standard desktop grid has 24-pixel gutters and can support up to 12 columns. The outside gutters are removed from the overall width of the grid.

Grid is built using the Flex component and is responsive. Grid column widths grow and shrink based on the parent element width.

Use Column, which is a child component of Grid, to lay out equal-sized content, such as a feed of cards.

Use the span prop to allow content to span multiple columns. Span defines how many columns you want the width of your content to take up out of a 12-column grid. The value of span becomes the numerator while 12 is the denominator, which gives us a percentage width value for each column. The default span is 1 column width.

In our example we're setting one column to equal 8 of the 12 columns (span={8}), and the other to be 4 of the 12 columns (span={4}).

Use offset to push a column to the right by a certain number of columns. For example, a layout with centered columns.

Set equalColumnHeights on a grid container and all columns in a single row will share the height of the tallest column.

This can be useful when trying to visually align Cards where their content is variable.

When columns have equal heights, a single child element will stretch to the height of the column. You may still need to control the width of that child though.

Use the vertical prop to stack columns vertically instead of horizontally. The vertical prop can work along with theme breakpoints, so your grid can be vertical on different viewports. For example to have your grid vertical on mobile and not tablet or desktop viewports, use vertical={[true, false, false]}. For a visual example, see the Storybook example and resize the browser.

A Grid can be nested inside another Grid. For example, you can split a column into multiple smaller columns in order to stack the outer Grid in a responsive view but not the inner Grid.

Grid column span, offset, and gutter props accept responsive values, allowing them to be changed on theme breakpoints. For example, setting span={[6, 8, 2] } on a Column will instruct the column to span 6 columns of the grid at the first breakpoint, 8 columns at the second, and 2 columns at the third breakpoint. Check out the examples below and resize the browser to see the responsive values in action.

When creating responsive layouts with the Grid, it is important to remember to control the vertical prop accordingly. At the breakpoints you wish to stack the columns, set vertical to equal true. This will apply the column gutters vertically, rather than horizontally.

Grid can be used to compose various types of layouts ranging from whole application pages and views down to individual component layouts.

Let's look at a common use case where we need to layout a page with a sidebar and a grid within the page content area.

Grid can also be used for responsive layouts.

• You can determine what size columns should be based on the breakpoints set on a theme. See the Storybook example
• Grid columns can also stack based on theme breakpoints. See the Storybook example

Grids can also be used for layouts within other components. For example, we can set up our card content to include 2 columns.

Use Grid whenever you need to layout or align content on a page or within a component. Grid should also be used for responsive page layouts. Since the grid is sized to the full width of its parent container, you may not want to use it for fixed width columns in a variable width container.