Grid

Overview

A Grid is a group of columns that organize layouts and allow content to scale responsively based on screen size. They provide structure to pages and ensure optimal viewing experiences.

Sample component

Grid availability

Style

Usage

Grids are fundamental to how content is organized across various devices and screen sizes.

Columns

The number of columns that a grid contains is determined by the screen size.

A grid on large screens contains 12 columns

A grid on small screens contains one column

Gutters

Gutters are the spaces in between columns, they also change depending on the screen size. Gutters help separate content into layouts based on the amount of columns being used.

Margins

Margins are the spaces between a grid and the edges of the screen or window. They can be the same width or larger than gutters, depending on the screen size.

Large screens

The grid for large screens features 12 columns, like desktop and tablet. Column, gutter, and margin widths reduce as breakpoints get smaller.

Small screens

The grid for small screens features one column. In rare cases, content on small screens can sometimes be arranged in two columns.

Best practices

Don’t align every component to the grid, doing so might compromise the design of individual elements.

18px or larger text shouldn't exceed eight columns to maintain optimal readability.

Responsive design

Large screens

The grid for large screens features 12 columns, like desktop and tablet. Column, gutter, and margin widths reduce as breakpoints get smaller.

Small screens

The grid for small screens features one column. In rare cases, content on small screens can sometimes be arranged in two columns.

Breakpoints

A breakpoint is a predetermined screen size that has specific layout requirements. When breakpoints change, content will shift around to fit the adjusted layout.