Skip to content

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 sizeColumns (fluid)Gutters (fixed)Outer side margin (fluid)Content Area
375px (min width)43 (16px each)16px (spacing-3)375-2*16 = 343px
768px (wide breakpoint)1211 (24px each)~52px (spacing-5)768-2*52 = 664px
1280px (max width)1211 (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.