Grid

Purpose

The Grid is a simple layout component for laying things out in columns and rows

Example

Grid Small
Grid Large

Description

Grid is a simple container component that handles laying out any subelements on a grid. It can be used wherever a multi-column layout is needed. Grid items can also optionally span multiple rows of the grid.

On smaller screens, it reverts to a single-column layout.

This component uses CSS Grid for layout. Because this is only supported by modern browsers, older browsers will simply fall back to the small screen (single column) layout, with a sensible max-width.

Storybook: Grid

Elements

The Grid consists of a container, and an arbitrary number of grid items.

Grid items can be any block-level element.

Variants

Fixed Grid

The default layout is "fixed": ie. a fixed number of columns across all screen widths. This can be specified via the columns prop. The columns will fill the available space.

Adaptive Grid

The "adaptive" variant can be used where we don't care about the exact number of columns, but rather we want an appropriate number of columns based on a sensible minimum column width. Our card grids are an example of an adaptive grid layout: the number of columns varies according to what best fits at the current screen size.

An adaptive grid will naturally become single column at a certain screen size, so unlike with the default fixed version, the Grid styles will apply at all screen sizes.

Added by: