cloud.gov pattern library

Grid: Flex Fixed And Percentage Widths

Layout

Float layout

The float layout grid uses a 928px max-width. Grid columns collapse down to a single width on small screens.

Float layout grid rows

A .grid represents a single row. For multiple rows, use multiple grids.

<div class="grid">
  <div class="grid-width-4"></div>
  <div class="grid-width-8"></div>
</div>
<div class="grid">
  <div class="grid-width-8"></div>
  <div class="grid-width-4"></div>
</div>

Flex layout

The flex layout has no max width. It is composed of parent rows and child cols. Each row of columns needs to be enclosed in a row and columns don’t have to add up to anything. If you’re using a pure flex -f{#] grid, the toal number of columns is simply the sum of the -f{#}s. (you can mix and match with col-fit and col-fill as well, or have underfilled rows using fixed or percentage width utilities). Columns may include nested rows and columns as in the following:

<div class="row">
  <div class="col-f4"></div>
  <div class="col-f8 row row-center-x">
    <div class="col-f10"></div>
    <div class="col-f1"></div>
    <div class="col-f1"></div>
  </div>
</div>
<div class="row">
  <div class="col-f12"></div>
</div>
<div class="row">
  <div class="col-f2"></div>
  <div class="col-fill"></div>
  <div class="col-fit"></div>
  <div class="col-f2"></div>
</div>
 
<p class="subhed sans-s6 fw700 lh-cap textblack">You can establish fixed-width columns and percentage-width columns in the flex grid using width utilities — <span class="font-mono fw300 mono-s6">.w#</span> and <span class="font-mono fw300 mono-s6">.w#ct</span>.</p>
<div class="flex-grid">
    <div class="row">
        <div class="coltest w20">
            <div class="pattern-content row">
                <div class="placeholder-lg bg-blue"></div>
            </div>
            <div class="pattern-name">20x/160px width</div>
            <div class="pattern-code">.w20</div>
        </div>
        <div class="coltest w50">
            <div class="pattern-content row">
                <div class="placeholder-lg bg-blue"></div>
            </div>
            <div class="pattern-name">50x/400px width</div>
            <div class="pattern-code">.w50</div>
        </div>
        <div class="coltest w30">
            <div class="pattern-content row">
                <div class="placeholder-lg bg-blue"></div>
            </div>
            <div class="pattern-name">30x/240px width</div>
            <div class="pattern-code">.w30</div>
        </div>
    </div>
    <div class="row">
        <div class="coltest w20ct">
            <div class="pattern-content row">
                <div class="placeholder-lg bg-gold"></div>
            </div>
            <div class="pattern-name">20% width</div>
            <div class="pattern-code">.w20ct</div>
        </div>
        <div class="coltest w33ct">
            <div class="pattern-content row">
                <div class="placeholder-lg bg-gold"></div>
            </div>
            <div class="pattern-name">33.333% width</div>
            <div class="pattern-code">.w33ct</div>
        </div>
        <div class="coltest col-fill">
            <div class="pattern-content row">
                <div class="placeholder-lg"></div>
            </div>
            <div class="pattern-name">fill width</div>
            <div class="pattern-code">.col-fill</div>
        </div>
    </div>
    <div class="row">
        <div class="coltest w33ct">
            <div class="pattern-content row">
                <div class="placeholder-lg bg-gold"></div>
            </div>
            <div class="pattern-name">33.333% width</div>
            <div class="pattern-code">.w33ct</div>
        </div>
        <div class="coltest w33ct">
            <div class="pattern-content row">
                <div class="placeholder-lg bg-gold"></div>
            </div>
            <div class="pattern-name">33.333% width</div>
            <div class="pattern-code">.w33ct</div>
        </div>
        <div class="coltest w33ct">
            <div class="pattern-content row">
                <div class="placeholder-lg bg-gold"></div>
            </div>
            <div class="pattern-name">33.333% width</div>
            <div class="pattern-code">.w33ct</div>
        </div>
    </div>
    <div class="row">
        <div class="coltest col-f1">
            <div class="pattern-content row">
                <div class="placeholder-lg"></div>
            </div>
            <div class="pattern-name">col f1</div>
            <div class="pattern-code">.col-f1</div>
        </div>
        <div class="coltest col-f1">
            <div class="pattern-content row">
                <div class="placeholder-lg"></div>
            </div>
            <div class="pattern-name">col f1</div>
            <div class="pattern-code">.col-f1</div>
        </div>
        <div class="coltest col-f1">
            <div class="pattern-content row">
                <div class="placeholder-lg"></div>
            </div>
            <div class="pattern-name">col f1</div>
            <div class="pattern-code">.col-f1</div>
        </div>
    </div>
</div>
 
<p class="subhed sans-s6 fw700 lh-cap textblack">You can establish fixed-width columns and percentage-width columns in the flex grid using width utilities — <span class="font-mono fw300 mono-s6">.w#</span> and <span class="font-mono fw300 mono-s6">.w#ct</span>.</p>
<div class="flex-grid">
  <div class="row">
    <div class="coltest w20">
      <div class="pattern-content row">
        <div class="placeholder-lg bg-blue"></div>
      </div>
      <div class="pattern-name">20x/160px width</div>
      <div class="pattern-code">.w20</div>
    </div>
    <div class="coltest w50">
      <div class="pattern-content row">
        <div class="placeholder-lg bg-blue"></div>
      </div>
      <div class="pattern-name">50x/400px width</div>
      <div class="pattern-code">.w50</div>
    </div>
    <div class="coltest w30">
      <div class="pattern-content row">
        <div class="placeholder-lg bg-blue"></div>
      </div>
      <div class="pattern-name">30x/240px width</div>
      <div class="pattern-code">.w30</div>
    </div>
  </div>
  <div class="row">
    <div class="coltest w20ct">
      <div class="pattern-content row">
        <div class="placeholder-lg bg-gold"></div>
      </div>
      <div class="pattern-name">20% width</div>
      <div class="pattern-code">.w20ct</div>
    </div>
    <div class="coltest w33ct">
      <div class="pattern-content row">
        <div class="placeholder-lg bg-gold"></div>
      </div>
      <div class="pattern-name">33.333% width</div>
      <div class="pattern-code">.w33ct</div>
    </div>
    <div class="coltest col-fill">
      <div class="pattern-content row">
        <div class="placeholder-lg"></div>
      </div>
      <div class="pattern-name">fill width</div>
      <div class="pattern-code">.col-fill</div>
    </div>
  </div>
  <div class="row">
    <div class="coltest w33ct">
      <div class="pattern-content row">
        <div class="placeholder-lg bg-gold"></div>
      </div>
      <div class="pattern-name">33.333% width</div>
      <div class="pattern-code">.w33ct</div>
    </div>
    <div class="coltest w33ct">
      <div class="pattern-content row">
        <div class="placeholder-lg bg-gold"></div>
      </div>
      <div class="pattern-name">33.333% width</div>
      <div class="pattern-code">.w33ct</div>
    </div>
    <div class="coltest w33ct">
      <div class="pattern-content row">
        <div class="placeholder-lg bg-gold"></div>
      </div>
      <div class="pattern-name">33.333% width</div>
      <div class="pattern-code">.w33ct</div>
    </div>
  </div>
  <div class="row">
    <div class="coltest col-f1">
      <div class="pattern-content row">
        <div class="placeholder-lg"></div>
      </div>
      <div class="pattern-name">col f1</div>
      <div class="pattern-code">.col-f1</div>
    </div>
    <div class="coltest col-f1">
      <div class="pattern-content row">
        <div class="placeholder-lg"></div>
      </div>
      <div class="pattern-name">col f1</div>
      <div class="pattern-code">.col-f1</div>
    </div>
    <div class="coltest col-f1">
      <div class="pattern-content row">
        <div class="placeholder-lg"></div>
      </div>
      <div class="pattern-name">col f1</div>
      <div class="pattern-code">.col-f1</div>
    </div>
  </div>
</div>
 
/* No context defined for this component. */