Grid Layout

Principles

Responsive and harmonious structure

The grid system adapts seamlessly across devices, creating a harmonious and balanced structure. This ensures that from the smallest phone to the largest desktop, the design retains its integrity, offering a consistent and engaging user experience.

Adaptable and intuitive design

Embracing the diversity of screen sizes, the grid layout is intuitively adaptable. It naturally transitions to a vertical stack on smaller screens, ensuring clarity and ease of navigation.

Creative flexibility with purpose

The use of nested grids offers creative flexibility while maintaining purposeful design. This approach allows for intricate and varied layouts, all while ensuring that each design decision is aligned with the needs of the user at every breakpoint.

Characteristics

• The Grid is divided into 12 equal-width Columns. Common layouts include evenly divided spaces, such as three 4-column or two 6-column segments, but you have the flexibility to divide them as needed.
• The Grid features fluid widths for its columns so as the overall grid width increases, the columns proportionally expand as well.
• The Grid's Gutter (between elements) and the Bounded Content padding (around the entire Grid) vary with screen size, providing larger screens with more whitespace.
• The Grid allows for Nested grids to create more flexible layouts.

Refer to Grid’s Usage.

Screen sizes

Standard mode

Compact mode

Implementation

Use the Bounded Content component to set a maximum width around the content and add an horizontal spacing to keep content from touching the edges of the browser window.

Use the Grid component to build pages using Columns and Gutters.