Grid
The If Design System includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. The grid comes with multiple tiers, one tier for each breakpoint (media query range).
Table of Contents
Edit this section, Opens in new windowOverview
Responsive UI
Responsive layouts in the If Design System should adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts and breakpoint details about how content reflows on different screens.
Breakpoints
For optimal user experience, If user interfaces should adapt layouts for the following breakpoint widths: 360px, 400px, 720px, 960px, 1200px, 1440px, 1920px, 2560px, 3200px and 3840px.
Types
Standard fixed width grid
- Column
- Gutter
Fluid grid, fixed margins
The fluid grid comes with fixed margins, so that the main content container has a fluid width.
Full width grid
The full width grid takes 100% of the container, in any breakpoint.
- Column
- Gutter
Nested grid
Wider fixed grid
The wider fixed grid is a bit wider than the standard fixed grid. This allows for wider components, like the product matrix table with many products.
Options
Mobile
|
XXS ≥22.5rem / 360px |
Extra small ≥25rem / 400px |
Smaller ≥45rem / 720px |
Small ≥60rem / 960px |
Medium ≥75rem / 1200px |
|
|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | |||
| Class postfix | --xxs |
--xs |
--smlr- |
--sm- |
--md- |
| # of columns | 12 | ||||
| Normal column width | fluid | fluid | fluid | fluid | 44px |
| Normal gutter width | 24px | 32px | 40px | 40px | 40px |
| Normal container width | 100% | 100% | 100% | 100% | 968px |
| Fluid gutter width | 24px | 32px | 40px | 40px | 40px |
| Fluid column width | fluid | fluid | fluid | fluid | fluid |
| Fluid container width | 100% | 100% | 100% | 100% | auto |
| Wide column width | fluid | fluid | fluid | fluid | 48px |
| Wide gutter width | 24px | 32px | 40px | 40px | 40px |
| Wide container width | 100% | 100% | 100% | 100% | 1016px |
| Across (full width) column width | fluid | fluid | fluid | fluid | fluid |
| Across (full width) gutter width | 24px | 32px | 40px | 40px | 40px |
| Across (full width) container width | 100% | 100% | 100% | 100% | 100% |
| Nestable | Yes | ||||
| Offsets | No | ||||
Desktop
|
Large ≥90rem / 1440px |
Extra large ≥120rem / 1920px |
XXL ≥160rem / 2560px |
Huge ≥200rem / 3200px |
Huger ≥240rem / 3840px |
|
|---|---|---|---|---|---|
| Grid behavior | Collapsed to start, horizontal above breakpoints | ||||
| Class postfix | --lg- |
--xl- |
--xxl- |
--huge- |
--xl- |
| # of columns | 12 | ||||
| Normal column width | 48px | 60px | 70px | 70px | 70px |
| Normal gutter width | 40px | 40px | 40px | 40px | 40px |
| Normal container width | 1016px | 1160px | 1280px | 1280px | 1280px |
| Fluid gutter width | 40px | 40px | 40px | 40px | 40px |
| Fluid column width | fluid | fluid | fluid | fluid | fluid |
| Fluid container width | auto | auto | auto | auto | auto |
| Wide column width | 60px | 70px | 68px | 68px | 68px |
| Wide gutter width | 40px | 40px | 56px | 56px | 56px |
| Wide container width | 1160px | 1280px | 1432px | 1432px | 1432px |
| Across (full width) column width | fluid | fluid | fluid | fluid | fluid |
| Across (full width) gutter width | 40px | 40px | 56px | 56px | 56px |
| Across (full width) container width | 100% | 100% | 100% | 100% | 100% |
| Nestable | Yes | ||||
| Offsets | No | ||||