Grid
A responsive grid, with a sensible number of breakpoints, provides structure for site content.
Grid Examples
One Half
Georgia is a state located in the southeastern United States. It was established in 1732 and was the last of the original Thirteen Colonies. Named after King George II of Great Britain, Georgia was the fourth state to ratify the United States Constitution, on January 2, 1788. Georgia declared its secession from the Union on January 19, 1861, and was one of the original seven Confederate states. Georgia was the last state to be restored to the Union, on July 15, 1870. Georgia is the 24th largest and the 8th most populous of the 50 United States.
One Half
Michigan is a state in the Great Lakes region of the Midwestern United States. The name Michigan is the French form of the Ojibwa word mishigamaa, meaning "large water" or "large lake". Michigan is the tenth most populous state, with the 11th most extensive total area (the largest state by total area east of the Mississippi River). Its capital is Lansing, and the largest city is Detroit. Michigan is the only state to consist of two peninsulas. A person in the state is never more than six miles from a natural water source or 85 miles from a Great Lakes shoreline.
One Third
Maryland is a state located in the Mid-Atlantic region of the United States, bordering Virginia, West Virginia, and Washington, D.C. to its south and west; Pennsylvania to its north; and Delaware to its east.
One Third
Massachusetts is a state in the northeastern United States, bordered by Rhode Island and Connecticut to the south, New York to the west, Vermont and New Hampshire to the north, and the Atlantic Ocean to the east.
One Third
North Carolina is a state in the Southeastern United States. North Carolina borders South Carolina and Georgia to the south, Tennessee to the west, Virginia to the north, and the Atlantic Ocean to the east.
One Fourth
California is a state located on the West Coast of the United States. It is the most populous U.S. state, with 38 million people, and the third largest state by area (after Alaska and Texas).
One Fourth
Illinois is a state in the Midwestern United States. It is the 5th most populous state and 25th largest state in terms of land area, and is often noted as a microcosm of the entire country.
One Fourth
Maine is a state in the New England region of the northeastern United States. In spite of its maritime position, it has a continental climate even in coastal cities such as its largest city Portland.
One Fourth
Indiana is a U.S. state located in the midwestern and Great Lakes regions of North America. Indiana is the 38th largest by area and the 16th most populous of the 50 United States.
Two Thirds
Oregon is a state in the Pacific Northwest of the United States. Oregon is bordered on the west by the Pacific Ocean, on the north by Washington, on the south by California, on the east by Idaho, and on the southeast by Nevada. The Columbia River delineates much of Oregon's northern boundary, and the Snake River delineates much of the eastern boundary. It is one of only three states of the contiguous United States to have a coastline on the Pacific Ocean. The capital of Oregon is Salem, the second most populous of its cities, with 160,614 residents (2013 estimate).
One Third
Minnesota is a state in the Midwestern United States. Minnesota was admitted as the 32nd state on May 11, 1858, created from the eastern half of the Minnesota Territory. Its name comes from the Dakota word for "clear blue water".
One Half
Virginia, is a U.S. state located in the South Atlantic region of the United States. Virginia, formally the Commonwealth of Virginia, is nicknamed the "Old Dominion" due to its status as the first colonial possession established in mainland British America, and "Mother of Presidents" because eight U.S. presidents were born there, more than any other state. The geography and climate of the Commonwealth are shaped by the Blue Ridge Mountains and the Chesapeake Bay, which provide habitat for much of its flora and fauna.
One Fourth
New York is a state in the Northeastern and Mid-Atlantic regions of the United States. New York is the twenty-seventh-most extensive, the fourth-most populous, and the seventh-most densely populated of the 50 United States.
One Fourth
Washington, D.C. is the capital of the United States, bordered by the states of Maryland and Virginia. Formally known as the District of Columbia, it is also commonly referred to as "Washington", "the District", or simply "D.C."
Implementation
To use the grid, wrap each grid row in a <div> with the usajobs-grid class. To use a grid without padding on the right and left, use the usajobs-grid-full class instead.
In order to migrate from the Bootstrap system currently in use we are temporarily relying on the breakpoints of that system. Future designs will add the U.S. Web Design Standard breakpoints. We use t-shirt sizes to track and discuss each breakpoint. At certain breakpoints the grid changes the overall number of columns giving us more finite control as the viewport expands.
| Name | Size | Columns | Description |
|---|---|---|---|
| SM | 30em/480px | 2 | USDS standard |
| M | 37.5em/600px | 6 | USDS standard |
| ML | 48em/768px | 6 | USAJOBS specific. |
| L | 62em/992px | 12 | Formerly MLL. USAJOBS specific. |
| XL | 75em/1200px | 12 | USDS standard |
| XXL | 85.375em/1366px | 12 | USAJOBS specific. Not currently used. |
| XXXL | 100em/1600px | 16 | USAJOBS specific. New shell width. |
| XXXXL | 120em/1920px | 16 | USAJOBS specific. Most common viewport width of visitors to USAJOBS. |
Accessibility
When to use
- The U.S. Web Design Standards call for the ability to increase the text size of the page by up to 200 percent without breaking the layout. We add that the layout must also not break with a reduction in size to 75% of the base layout.
Usability
When to use
- Use the grid as much as possible. When deviating from the grid, have a clear reason for doing so and document that reason in the appropriate places (in code).
When to consider something else
- Avoid mixing this grid with other grid systems on the same page.
Transitional Grid
In order to transition from Bootstrap to our new grid system we've included classes that will map Bootstrap's grid to the Neat grid.