Grid

Estimated reading: 2 minutes 122 views

The grid is the foundation for positioning components and patterns on user screens. Designing on a grid helps create a seamless and easy-to-use experience.

Principles

The grid comprises columns, gutters, and margins, providing a convenient structure for layout elements within the body region.

Components, imagery, and text should be aligned with the column grid to ensure a logical and consistent layout across screen sizes and orientations.

As the size of the body region grows or shrinks, the number of grid columns changes in response.

Application

Using a base grid of 8 pixels should allow flexibility in scaling and spacing. To ensure that each UI element is aligned to the pixel grid, values multiplied by 8 (eight) should be used to determine component sizes, padding, and margins.

Common Grid Layouts

A grid consists of a framework of cells laid out and aligned vertically and horizontally. It helps users read and visually navigate website content more efficiently, using a responsive, scrollable column structure.


Full width	12 columns	100%
One-half width	6 columns	50%
Two-thirds width	8 columns	60%
One-third width	4 columns	30%
Three-quarters width	9 columns	75%
One-quarter width	3 columns	25%

Structure

Layouts can feature one or more subdivisions, both horizontally and vertically. The division is straight, rectangular, and bled to the edge; it can be either symmetrical or clearly asymmetrical.

DocuWare Design

Grid

Principles

Application

Common Grid Layouts

Structure

CONTENTS

Loading Patterns

Alerts

Banners

Bias-Free Language

Text

Text Area

Time Input

Date Input

Slot Input

Masked Input

Number Input

Text Input