Grids
Use the U.S. Web Design System (USWDS) flexible grid system to layout your content in the WebCMS. You should be comfortable working in the HTML code and CSS in the source view of the WebCMS.
The grid system uses a series of containers, rows, and columns to lay out and align content.
- The container centers the grid on your page and gives it a max width of 1024px. You do not need to include a container unless you want to set the width of your grid.
- You must include the row as that is the parent container for the columns.
- Columns contain your content and can be set at specific widths or set to automatically adjust based on the content and the size of the page.
- You can align boxes side-by-side, including centering them.
- Borders are added with the border class.
On this page:
Columns
There are 12 possible columns per row. If you want a row to take up a larger portion of the row, you adjust the class on the column.
The default class is .grid-col and will display as equal-width columns. For example, four instances of grid-col will display as one-quarter-width columns across the page (or container).
<div class="grid-row"> <div class="grid-col">.grid-col</div> <div class="grid-col">.grid-col</div> <div class="grid-col">.grid-col</div> <div class="grid-col">.grid-col</div> </div>.grid-col-auto items fit the natural width of their content. For example, two columns of .grid-col-auto will only be as wide as the content and may take up less space than the width of the page (or container).
<div class="grid-row"> <div class="grid-col-auto">.grid-col-auto</div> <div class="grid-col-auto">.grid-col-auto</div> </div>Responsive classes
.grid-col-[1-12] set a fixed width of [n] grid columns in a 12-column grid. Use these classes when you need a column of a specific width. For example, if you want three equal-width columns across, use .grid-col-4 for each item.
<div class="grid-row"> <div class="grid-col-4">.grid-col-4</div> <div class="grid-col-4">.grid-col-4</div> <div class="grid-col-4">.grid-col-4</div> </div>Gutters
Rows and columns don’t have any gutters (gaps) by default. Add .grid-gap to a grid row to add the default gutter between each column in the row. Other classes for gutters include .grid-gap-sm or .grid-gap-lg. Using these gap/gutters will change the overall width of your grid.
default gutter (.grid-gap )
<div class="grid-row grid-gap"> <div class="grid-col">.grid-col</div> <div class="grid-col">.grid-col</div> <div class="grid-col">.grid-col</div> <div class="grid-col">.grid-col</div> </div>small gutter (.grid-gap-sm)
<div class="grid-row grid-gap-sm"> <div class="grid-col">.grid-col</div> <div class="grid-col">.grid-col</div> <div class="grid-col">.grid-col</div> <div class="grid-col">.grid-col</div> </div>large gutter (.grid-gap-lg)
<div class="grid-row grid-gap-lg"> <div class="grid-col"><p>.grid-col</p></div> <div class="grid-col"><p>.grid-col</p></div> <div class="grid-col"><p>.grid-col</p></div> <div class="grid-col"><p>.grid-col</p></div> </div>.grid-col
.grid-col
.grid-col
.grid-col
Borders
Adding a border around columns
Adding a border around content
Use Grids for Layout
Screen readers can easily follow the flow of a table that consists of text and content, and images that are not associated with links and captions. Tables should not be used for layout.
The grid is the recommended approach to building a page layout that includes rows, columns, text, content, images, links, and captions. In this example, two sets of two-column grids are used to create the layout (grid code below):
Map Thumbnails
The grid code used to build the layout above:
<div class="grid-row">
<div class="grid-col-6">image1/link/caption</div>
<div class="grid-col-6">image2/link/caption</div>
</div>
<div class="grid-row">
<div class="grid-col-6">image3/link/caption</div>
<div class="grid-col-6">image4/link/caption</div>
</div>
U.S. Web Design System (USWDS)
You can explore many more options on the USWDS grid page, including offsetting columns, wrapping, nesting, and much more.