Spacing & Grid

We strongly encourage all State employees to exploit the grid available in USWDS. If you are using a different foundation for your project:

• Use a standard base unit
• Use consistent, scalable spacing increments
• Use a 12-column flexible grid
• Use recommended breakpoints and make sure that your column sizing is responsive

Grid and Flexbox

Flexbox should be implemented within your grid, not used in place of it. Grids should be used for two-dimensional layouts (rows and columns). Flexbox should be used for one-dimensional layouts (rows OR columns). In general, grids should be used to layout your content and flexbox should be used to align elements if necessary.

To learn more, check out:

• Layout Grid and Flex from USWDS
• CSS Grid Layout from W3 Schools
• When to use Flexbox and when to use CSS Grid

Responsive Breakpoints

If your solution is intended for use on a variety of devices (like smartphones and desktops), you must ensure that standard breakpoints are used in your design. Examples of common (default) breakpoints are below. If you use media queries well, you'll be able to ensure that your design works well across a vast majority of devices. In general, you should plan on supporting:

• Most mobile devices (smartphones).
• Tablets.
• Laptops and smaller desktop monitors.
• Standard desktop monitors and similar.
• Really big screens (TVs, computer monitors, etc.).

Example Breakpoints

Recommended Breakpoints

If you are using USWDS or another modern responsive system or framework, you do not need to customize breakpoints. The breakpoints below should be used in custom design projects and may (optionally) be used if you would like to override defaults.

• 320px: Extra small devices (smartphones, portrait)
• 480px: Small mobile devices
• 640px: Large mobile devices
• 768px: Tablets (portrait)
• 1024px: Tablets (landscape) and small laptops
• 1280px: Standard desktop screens
• 1440px: Large desktop displays
• 1920px: Wide/4K displays

Example Implementations

Examples

/* Extra small devices */ @media (max-width: 480px) { ... } 
                    /* Small tablets */ @media (min-width: 481px) and (max-width: 768px) { ... } 
                    /* Large tablets and small laptops */ @media (min-width: 769px) and (max-width: 1024px) { ... } 
                    /* Desktop */ @media (min-width: 1025px) and (max-width: 1440px) { ... } 
                    /* Large/wide displays */ @media (min-width: 1441px) { ... }
                

// USWDS Breakpoint Overrides 
// Custom breakpoints with fluid design approach 
// Default USWDS imports 
@use "uswds" with ( 
// Override default breakpoints with more granular, responsive values 
$theme-grid-breakpoints: ( 
'xs': 0, // Extra small devices (mobile) 
'sm': 320px, // Smaller mobile devices 
'mobile': 480px, // Standard mobile 
'tablet': 640px, // Tablets (portrait) 
'desktop': 1024px, // Tablets (landscape) and small laptops 
'lg': 1280px, // Standard desktop 
'xl': 1440px, // Large desktop 
'widescreen': 1920px // Wide/4K displays 
), );