UI components
Grids
This 12-column, responsive grid provides structure for website content.
Grid
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."
<h2 class="usa-heading">Grid</h2>
<div class="preview preview-no_border grid-example grid-example-blank">
<div class="usa-grid">
<div class="usa-width-one-whole">1/1</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-half">1/2</div>
<div class="usa-width-one-half">1/2</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-third">1/3</div>
<div class="usa-width-one-third">1/3</div>
<div class="usa-width-one-third">1/3</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-fourth">1/4</div>
<div class="usa-width-one-fourth">1/4</div>
<div class="usa-width-one-fourth">1/4</div>
<div class="usa-width-one-fourth">1/4</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
<div class="usa-width-one-sixth">1/6</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
<div class="usa-width-one-twelfth">1/12</div>
</div>
</div>
<h2 class="usa-heading">Grid examples</h2>
<div class="preview preview-no_border grid-example grid-text">
<div class="usa-grid">
<div class="usa-width-one-half">
<h3>One Half</h3>
<p>
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.
</p>
</div>
<div class="usa-width-one-half">
<h3>One Half</h3>
<p>
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.
</p>
</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-third">
<h3>One Third</h3>
<p>
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.
</p>
</div>
<div class="usa-width-one-third">
<h3>One Third</h3>
<p>
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.
</p>
</div>
<div class="usa-width-one-third">
<h3>One Third</h3>
<p>
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.
</p>
</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>
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).
</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>
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.
</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>
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.
</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>
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.
</p>
</div>
</div>
<div class="usa-grid">
<div class="usa-width-two-thirds">
<h3>Two Thirds</h3>
<p>
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).
</p>
</div>
<div class="usa-width-one-third">
<h3>One Third</h3>
<p>
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".
</p>
</div>
</div>
<div class="usa-grid">
<div class="usa-width-one-half">
<h3>One Half</h3>
<p>
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.
</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>
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.
</p>
</div>
<div class="usa-width-one-fourth">
<h3>One Fourth</h3>
<p>
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."
</p>
</div>
</div>
</div>
<style scoped>
.grid-example > div > div {
border: 1px solid #727272;
padding: 1em;
}
</style>
Implementation
To use the grid, wrap each grid row in a block-level element (e.g. <section>, <div>, etc...) with the usa-grid class. To use a grid without padding on the right and left, use the usa-grid-full class instead.
Each grid item is written semantically by its width. For example: usa-width-one-half = 1/2 grid item, usa-width-two-thirds = 2/3 grid item.
Medium breakpoints are used for 1/6 and 1/12 grid items, which both transform into a 1/3 grid item at medium screen sizes.
All grid items are full-width at small screen sizes.
Accessibility
- Low-vision users should be able to increase the size of the text by up to 200 percent without breaking the layout.
Usability
When to use
- Almost always use a grid layout — visitors can read more quickly on pages that use grids. Choose a single grid system for your entire site.
When to consider something else
- Avoid mixing this grid and other grid systems.
Guidance
- Choose a 12-column grid with flexible column widths and fixed gutters. The width of the padding on the left and right edge of the grid depends on device size.
- Avoid text lines longer than 75 characters. Place text in narrower grid boxes to keep text lines from becoming too wide.