Spacing token 4
32 px / 2 rem
Spacing token 2
16 px / 1 rem
Use a 12-column U.S. Web Design System (USWDS) grid with containers, rows, and columns, to layout and align content.
The grid system provides a structure. It organizes content in a visually appealing and user-friendly manner. It adapts to various screen sizes and makes the website accessible on different devices.
Grid container
It centers all content on the screen and sets a maximum width of 1400 pixels (px) for desktops. To organize the content into columns, a grid row must serve as its parent.
Screen size
Grid container
Grid row
Standard grid
Each grid can hold up to 12 columns with flexible responsive widths and gutters. You can combine any column within the row, depending on your layout needs. For example, you can create columns of four-eight or three-three-six.
Grid row
one
one
one
one
one
one
one
one
one
one
one
one
two
two
two
two
two
two
three
three
three
three
four
four
four
six
six
twelve
Gutters
Use default gutters between each column in the row. The default gutter width is two spacing units, increasing to four units for larger screens.
Breakpoints
The grid container uses different width values (breakpoints). Each breakpoint sets in place large-scale changes to the website layout. This includes:
- Navigation and sidebar behavior
- Font sizes
- Margins and padding adjustments
This allows the container to display properly on different devices and screen resolutions.
| Spacing token | Pixel value | Gutters |
| mobile | 320px | 2 |
| mobile-lg | 480px | 2 |
| tablet | 640px | 2 |
| tablet-lg | 880px | 2 |
| desktop | 1024px | 4 |
| desktop-lg | 1200px | 4 |
| widescreen | 1400px | 4 |
Side navigation
Use a three-nine grid layout, with three columns for the side navigation and nine columns for the body content.
three
nine
Side Nav container
Body content container
three
nine
Side Nav container
Body content container
Body grid layout options
The body container also uses a 12-column USWDS grid. This helps organize the content. These are the most popular layout options:
- Six-to-Six (1/2 to 1/2)
- Four-to-Four-to-Four (1/3 to 1/3 to 1/3)
- Four-to-Eight (1/3 to 2/3)
Examples
Three column layout (four-to-four-to-four)
Two-column layout (six-to-six) inside a highlights box
Mission
To improve the health and well-being of America’s mothers, children, and families.
Vision
An America where all mothers, children, and families thrive and reach their full potential.
six
six
six
six
Two-column layout (eight-to-four) for cards
-
Review data profiles and special populations funded programs. Get a snapshot of patient characteristics and compare data between states or territories or to the national average.
-
View expanded summaries of UDS tables and five-year national summaries of select UDS data measures aggregated by Health Center Program awardees.
eight
four
eight
four
Date Last Reviewed: