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

Grid availability

Style

Grid specs

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.

Grid columns on desktop

A grid on large screens contains 12 columns

Grid columns on mobile

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.

Grid gutters on desktop
Grid gutters on mobile

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.

Grid margins on desktop

Small screens

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

Grid margins on mobile

Best practices

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

Grid content outside of grid

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

Grid alignment issues

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.

Example of responsive grid on large screen Example of responsive grid on smaller screen

Small screens

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

Example of responsive grid on large screen
Example of responsive grid on smaller screen

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.

Device Window Range Columns Gutters
Desktop Large > 1368px 12 11
Desktop Small 1200 - 1367px 12 11
Tablet Landscape 992 - 1199px 12 11
Tablet Portrait 768 - 991px 12 11
Mobile Landscape 576 - 767px 1 0
Mobile Portrait 320 - 575px 1 0

Feedback

To give feedback about this page, contact us.

Foundations

To learn more about color, grid, typography, etc., visit the Foundations section.