UI components

Grids

This 12-column, responsive grid provides structure for website content.

Grid

1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/6
1/6
1/6
1/6
1/6
1/6
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12

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 <div> 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.