Layout Types

Looking across products and pages, common layout patterns emerge:

Common Base Layouts

• 4 columns

• 3 columns

• 2 columns

• 1 column (full width)

• 1 column (centered)

Less Common, Special Layouts

• Narrow left – 2 columns

• Quarter Left – 2 columns (25 / 75)

• Third Left – 2 columns (30 / 70)

• Quarter Right – 2 columns (75 / 25)

Base Rules & Sizing Math

• Smallest Supported Size: 320px

• Minimum Column Width: 280px

• Base Rule: The minimum width of a column should be 280px. If it goes below, break the grid and reduce the number of columns.

• Standard Gutters & Outer Padding: 20px

Formula: Minimum Width for a 4-Column Grid

• (4 * 280px) + ((4 - 1) * 20px) + (20px * 2)
= 1220px

• The same rule applies to all grid variations and different numbers of columns

Layout Breaks Examples

From Breakpoints to Container Queries

Container Width ≠ Viewport Width

• Container: The wrapper the grid lives in. The layout of the grid is defined by the size of the container, not the viewport.

• Dynamic Reflow: When the container resizes and gets smaller, the grid inside breaks if it drops below a certain width.

• Flexibility: Content (widgets, forms, tables) can be moved into a new context and will resize correctly automatically without needing context-specific breakpoint styles.