The key to every great design is the organization of its information. Spacing methods and layout grids define structure, hierarchy, and rhythm in your design. When correctly used, they reduce decision making and help establish a rational approach to type scales, positioning, sizing and spacing.

This guide will walk though spacing and layout grid best practices based on Material Design, Bootstrap, and Figma.

Keep an eye out for the free layout grids UI kit at the end of the article 👀. It contains layout grid styles, responsive behavior, and constraint examples to help you learn and jump start your design process. ⚡️⚡️⚡️

Spacing Basics

Before we dive into layout grids, let’s review some of the spacing basics that impact all sizing, measuring, and spacing decisions (including grid configuration).

Base unit

The base unit defines what every measurement will be a multiple of. This keeps designs consistent, improves communication with developers, and reduces the number of decisions a designer has to make. The most recommended base unit is 8px because it makes scaling for a wide variety of devices easy and consistent. This is because most screen sizes are divisible by 8 and because 8 is itself an easily divisible number (8/2=4, 8/4=2).

Base unit

Tip: Icons, text and some elements within components can align to a 4px grid to improve spacing in small areas and make implementation easier.

Sizing

The height and width of UI elements should be measured in increments of the base unit (ie. 8, 16, 24) when possible. This creates clear hierarchy, aligns elements neatly, and provides a consistent visual rhythm. For example, line height, buttons, and form inputs can be expected to have the same incremental heights across all your designs.

Sizing

Padding

Padding refers to the space between UI elements and is also measured in increments of the base unit. Consistent, predicable padding is aesthetically pleasing, clarifies the relationship between elements, and improves readability. For example, the padding inside a component should create a holistic spacing pattern between all its elements.

Padding