Grid
Currency uses a grid system as a high-level model for Nerds to design a more consistent user experience across NerdWallet.
To design and then implement within the Currency grid system (or "Currency Grid") requirements, Currency provides a set of resources (e.g., Figma assets, React components, base-styles rules).
Properties
Responsive
The Currency Grid requirements include being responsive to support different mobile web and desktop layouts. There is a single breakpoint at 768px, above which is referred to as "desktop" or "wide", and below is referred to "mobile" or "not wide".
Fluid columns
The Currency Grid requirements use a 4 fluid (percentage-based, scaling linearly with the viewport) column grid layout on mobile (< 768px), and a 12 fluid column grid layout on desktop (>= 768px) that stretches up to 1280px. Above 1280px, the grid stops growing and becomes fixed.
Fixed gutters
The fixed spaces between the columns are called gutters.
One breakpoint
At the mobile breakpoint, both columns and gutters snap to a different size:
| Viewport size | Columns (fluid) | Gutters (fixed) | Outer side margin (fluid) | Content Area |
|---|---|---|---|---|
| 375px (min width) | 4 | 3 (16px each) | 16px (spacing-3) | 343px |
| 768px (wide breakpoint) | 12 | 11 (24px each) | ~52px (spacing-5) | 664px |
| 1280px (max width) | 12 | 11 (24px each) | 64px (spacing-5) | 1152px |
Note: In reality, these values are flexible and scale with the viewport size. The numbers above are snapshots at key sizes for demonstration purposes.
Max width
The Currency Grid respects a max width of 1280px. Columns will stop fluidly growing at 1280px. The outer margins continue to grow with the browser window and the grid remains centered.
Content area
This is the space that contains the columns and gutters. Product designers should not normally design outside the Content Area.