Grid, Layout, Spacing

In B2B products, the grid remains one of the most reliable tools for keeping interface composition under control. Large systems are built by multiple teams, often working in parallel and combining UI elements in different ways. A shared coordinate system helps everyone speak the same visual language and consistently achieve predictable results. In practice, the grid becomes a compatibility standard.

This is especially critical for SaaS products, where interfaces must work across a wide range of screen sizes, from large desktop monitors to compact mobile devices.

Base Grid and Spacing Principles

Because B2B systems are dense with information and functionality, efficient space usage is essential. A common and well-proven approach is to use a primary grid based on 16 pixels, supported by a secondary grid of 4 pixels. This creates a clear rhythm for layout and spacing.

Major layout elements and outer spacing align to 16-pixel increments such as 16, 32, 48, or 64. At the same time, the 4-pixel step allows for finer adjustments inside components, enabling precise internal spacing without breaking overall consistency.

Choosing the Number of Columns

The number of columns should be tied to the effective width of the device, more specifically to its virtual or logical pixel width rather than raw physical resolution. Modern operating systems rely heavily on scaling, which means interface design must account for the resolution users actually see.

A high-resolution laptop screen, for example, may render interfaces at a lower virtual width to preserve readability. The same logic applies to mobile devices, where physical pixel counts are much higher than the effective layout width. Designing for virtual pixels ensures consistent and usable layouts across devices.

12 Columns Are Not Always Enough

Twelve columns are often considered a classic choice. They offer flexibility and allow content to be split into halves, thirds, or quarters with ease. For many content-driven layouts, this approach works well.

However, data-heavy SaaS products frequently rely on tables, charts, and complex forms. On wide screens and 4K displays, layouts based on 16 or even 24 columns provide better control over density and allow interfaces to scale without feeling constrained.

It is important to remember that the grid is an internal system. Documentation should define allowed column combinations, describe how blocks respond to width changes, and specify when components should collapse into a single column.

Column Widths and Gutters

In B2B interfaces, it is usually best to keep gutters fixed. Consistent spacing between columns creates visual stability and simplifies development. A common and effective choice is a 16-pixel gutter.

On very wide screens, gutters can be increased gradually, but this should be done carefully to avoid layouts feeling too loose. Column widths themselves should remain flexible. In responsive grids, columns stretch while gutters stay constant, helping balance information density and visual breathing room.

Do All Elements Need to Follow the Grid?

Not necessarily. Some elements benefit from operating outside the main grid. Tables are a common example. Their internal column structure often follows data logic rather than page layout, as long as overall alignment and outer spacing remain consistent.

Forms can also diverge from the grid when the sequence of fields matters more than strict symmetry. The goal is not rigid adherence, but controlled flexibility.

Mobile Adaptation

On mobile devices, grids become simpler. Layouts typically collapse to one or two columns, gutters are reduced, and outer margins often increase to maintain readability.

Special attention should be paid to text scaling. Users can increase font size at the system level, and the grid must handle this gracefully. Components should reflow naturally, wrapping onto new lines without overlaps or broken layouts.

Documentation and Handoff to Development

A grid system only works when its principles are clearly documented. This includes which grids are used at different breakpoints, how components respond to width changes, where exceptions are allowed, and how to handle long forms and data-heavy tables.

All standard sizes and spacing values should be stored as Figma variables and passed through to design tokens. A well-defined grid reduces layout drift over time, speeds up decision-making, and keeps the product visually consistent even as teams and features grow.