Grid
The Currency design system uses a grid system as a framework for Nerds to design and build a more consistent user experience.
What is the Currency grid system?
A grid system is a model to help build more more consistent layouts. While there are many different grid systems to choose from, the Currency grid system (or "Currency Grid") is designed to meet the needs of our user’s viewports.
To design and implement using the grid system, Currency provides set of resources (e.g. Figma assets, React components, base-styles rules).
Properties
Responsive
The Currency Grid is responsive to support different mobile web and desktop sized 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 uses 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) | 375-2*16 = 343px |
| 768px (wide breakpoint) | 12 | 11 (24px each) | ~52px (spacing-5) | 768-2*52 = 664px |
| 1280px (max width) | 12 | 11 (24px each) | 64px (spacing-5) | 1024-2*64 = 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.