<?xml version="1.0" encoding="utf-8"?>

Grids

A grid system is a way to align page elements based on sequenced columns and rows. We use it to arrange text, images, and other elements consistently throughout a product. Think of the grid system as the digital version of a print layout for magazines.

Some grids are made up of a set number of columns: 9 or 12 are fairly common. Modular grids, on the other hand, add a horizontal subdivision and consist of multiple cells. Most grids also contain gutters, empty spaces a few pixels wide, between each column to improve spacing and alignment.

Improve your UX & Product skills with interactive courses that actually work