|

   Veteran Tools Platform - Developer Documentation

Grid: Offsets

Grid

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

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.

Offsets

To move grid columns to the right, use the usa-offset-* classes. For example: <div class="usa-width-one-third usa-offset-one-fourth"> would create a column that is 1/3rd the width of the grid and moved 1/4th of the width of the grid from the left margin.

PropRequired?TypeDefaultDescription
<div class="grid-example">
    <div class="usa-grid">
        <h2 class="usa-heading">Grid Offset Examples</h2>
    </div>
    <div class="usa-grid">
        <div class="usa-width-one-half usa-offset-one-twelfth">
            <h3>One Twelfth Offset</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>
    <div class="usa-grid">
        <div class="usa-width-one-half usa-offset-one-sixth">
            <h3>One Sixth Offset</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>
    <div class="usa-grid">
        <div class="usa-width-one-half usa-offset-one-fourth">
            <h3>One Fourth Offset</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>
    <div class="usa-grid">
        <div class="usa-width-one-half usa-offset-one-third">
            <h3>One Third Offset</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>
    <div class="usa-grid">
        <div class="usa-width-one-half usa-offset-one-half">
            <h3>One Half Offset</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>
</div>

<style scoped>
    .grid-example>div {
        margin: 2em 0;
    }

    .grid-example>div>div {
        border: 1px solid #ccc;
        padding: 1em;
    }
</style>
 
<div class="grid-example">
  <div class="usa-grid">
    <h2 class="usa-heading">Grid Offset Examples</h2>
  </div>
  <div class="usa-grid">
    <div class="usa-width-one-half usa-offset-one-twelfth">
      <h3>One Twelfth Offset</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>
  <div class="usa-grid">
    <div class="usa-width-one-half usa-offset-one-sixth">
      <h3>One Sixth Offset</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>
  <div class="usa-grid">
    <div class="usa-width-one-half usa-offset-one-fourth">
      <h3>One Fourth Offset</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>
  <div class="usa-grid">
    <div class="usa-width-one-half usa-offset-one-third">
      <h3>One Third Offset</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>
  <div class="usa-grid">
    <div class="usa-width-one-half usa-offset-one-half">
      <h3>One Half Offset</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>
</div>

<style scoped>

.grid-example > div {
  margin: 2em 0;
}

.grid-example > div > div {
  border: 1px solid #ccc;
  padding: 1em;
}

</style>
 
package:
  name: department-of-veteran-affairs/jean-pants
  version: 0.1.0
assetPath: /design-system/
isProduction: true