Mastering Grid Systems: Boost Design Efficiency Across Devices

1. Origin of the Grid

The earliest grid concept came from print design in 1692 when King Louis XIV of France commissioned a royal committee to create a scientific, functional typeface based on a strict geometric grid of 64 basic units, each further divided into 36 sub‑units, forming a total of 2,304 small squares. This was the first scientific experiment on type and layout, laying the foundation for modern grid systems.

2. What a Grid Is

A grid is a regular array of cells that provides a stable framework for arranging modules and information elements on an interface, helping designers organize content. In UI design, grid systems evolve from graphic design grids. While print grids have fixed dimensions, UI grids adapt to device width, with column width varying and height determined by content.

3. Why Use a Grid

For Users : Consistent layout reduces cognitive cost, improves readability, and speeds up browsing.

For Designers : A unified grid speeds decision‑making, ensures consistent output, and facilitates collaboration across teams and business lines.

For Developers : A clear grid improves design‑to‑code fidelity, reduces explanation overhead, and supports component reuse.

For Responsiveness : Grids make adaptive layouts predictable across devices, enabling smooth scaling.

4. Grid Components

Grid (Gird) : The smallest unit of the system.

Column : Defines vertical alignment and the number of divisions (e.g., 12‑column or 24‑column grids).

Gutter : The spacing between columns; no content should be placed inside a gutter.

Margin : Also called safe margin; the distance from the screen edge where no content is placed.

Container : The total width of the grid, including columns, gutters, and margins.

Column Box (Col‑n) : A region that occupies a specific number of columns, used to group components, text, images, buttons, etc.

5. How to Define a Grid System

Before creating a grid, understand the calculation formula (illustrated in the original diagram). Then follow these steps:

a. Determine the grid area : Usually the content layer, not the entire canvas.

b. Choose the number of columns : 12‑column grids suit simple, multi‑platform content; 24‑column grids suit complex PC tools (e.g., Ant Design uses 24 columns).

c. Define gutter and margin : Use a base

1rem

for gutters (flexible) and

1.5rem–2rem

for margins. Choose values from common multiples of 4 or 8 (4, 8, 16, 24, 32, 48) to match the product.

6. Grid Usage Tips

Fixed Grid : Elements keep their size and spacing until a breakpoint is reached; simple to implement but limited in flexibility.

Fluid Grid : Margins and gutters stay constant while column widths scale proportionally, allowing content to fill the available space across resolutions.

Mixed Grid : Combines fixed and fluid grids, often used in backend tools where some sections need strict width and others benefit from fluid scaling.

7. Practical Guidelines

Define content blocks from column start to column end (e.g., 6×2, 3×4).

Never place content inside gutters or safe margins.

Avoid placing elements outside the column area unless deliberately designed.

Parent containers should align to the grid; child components can be slightly offset.

Grid areas can be scoped to specific business scenarios, not necessarily the whole canvas.

Nested grids are acceptable when a module’s density differs from the global grid.

Conclusion

Grid systems provide a powerful tool for efficient design, but they should not become restrictive. Designers must balance standards with creative freedom to achieve the best user experience.

Author: 沙拉 (the article is part of the “Cool Home User Experience Design” series; the promotional links at the end have been omitted).