Grid

Use our flexible grid system to structure website content. The grid is mobile-first, powered by flexbox, and based on a 12-column system.

Maturity level - ready for production

View the React component implementation details and all variants in Storybook.

Component examples

Default

Guidance

How it works

The grid system uses a series of containers, rows, and columns to lay out and align content. The following row and corresponding code are an example of and in-depth look at how the grid comes together.

Currently, the layout grid component is only available as a React component.

The Grid component requires a Grid Container for use.

For more information, please refer to our Storybook link above or the UWSDWS documentation.