Columns Layout

By default, columns split available width into evenly-distributed areas. You may also choose a specified width for certain columns to fix the layout of their contents across different screen and browser window sizes (the other columns without set widths will evenly split the remaining space).

The first column of main page content has a specified width of "Medium" that remains constant even as the page width changes. The remaining columns (2 and 3) automatically adjust by splitting leftover space.

For pages that have adjacent sections of uniform content, use columns and column widths consistently across sections to align interface components and establish visual balance.


Align columns horizontally across sections with similar content


Avoid using inconsistent sets of column widths across adjacent sections that contain similar content (e.g. all columns contain text fields)

Visual balance is important for all types of pages, including forms and read-only dashboards.

Open in Github

On This Page