The float layout grid uses a 928px max-width. Grid columns collapse down to a single width on small screens.
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>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">
The flex layout has no max width and can be mixed and nested as necessary. The total number of columns is simply the sum of the <span class="font-mono fw300 mono-s6">-f#</span>s. Items in a <span class="font-mono fw300 mono-s6">.row</span> are top
aligned by default.
</p>
<div class="flex-grid">
<div class="row">
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
</div>
<div class="row">
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
</div>
<div class="row">
<div class="coltest col-f3">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 3</div>
<div class="pattern-code">.col-f3</div>
</div>
<div class="coltest col-f3">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 3</div>
<div class="pattern-code">.col-f3</div>
</div>
<div class="coltest col-f3">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 3</div>
<div class="pattern-code">.col-f3</div>
</div>
<div class="coltest col-f3">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 3</div>
<div class="pattern-code">.col-f3</div>
</div>
</div>
<div class="row">
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 4</div>
<div class="pattern-code">.col-f4</div>
</div>
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 4</div>
<div class="pattern-code">.col-f4</div>
</div>
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 4</div>
<div class="pattern-code">.col-f4</div>
</div>
</div>
<div class="row">
<div class="coltest col-f5">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 5</div>
<div class="pattern-code">.col-f5</div>
</div>
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 5</div>
<div class="pattern-code">.col-f5</div>
</div>
</div>
<div class="row">
<div class="coltest col-f6">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 6</div>
<div class="pattern-code">.col-f6</div>
</div>
<div class="coltest col-f6">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 6</div>
<div class="pattern-code">.col-f6</div>
</div>
</div>
<div class="row">
<div class="coltest col-f7">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 7</div>
<div class="pattern-code">.col-f7</div>
</div>
<div class="coltest col-f5">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 5</div>
<div class="pattern-code">.col-f5</div>
</div>
</div>
<div class="row">
<div class="coltest col-f8">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 8</div>
<div class="pattern-code">.col-f8</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
</div>
<div class="row">
<div class="coltest col-f9">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 9</div>
<div class="pattern-code">.col-f9</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
</div>
<div class="row">
<div class="coltest col-f10">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 10</div>
<div class="pattern-code">.col-f10</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
</div>
<div class="row">
<div class="coltest col-f11">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 11</div>
<div class="pattern-code">.col-f11</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
</div>
<div class="row">
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
</div>
</div>
<p class="subhed sans-s6 fw700 lh-cap textblack">
The flex layout has no max width and can be mixed and nested as necessary. The total number of columns is simply the sum of the <span class="font-mono fw300 mono-s6">-f#</span>s. Items in a <span class="font-mono fw300 mono-s6">.row</span> are top
aligned by default.
</p>
<div class="flex-grid">
<div class="row">
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
</div>
<div class="row">
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
</div>
<div class="row">
<div class="coltest col-f3">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 3</div>
<div class="pattern-code">.col-f3</div>
</div>
<div class="coltest col-f3">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 3</div>
<div class="pattern-code">.col-f3</div>
</div>
<div class="coltest col-f3">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 3</div>
<div class="pattern-code">.col-f3</div>
</div>
<div class="coltest col-f3">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 3</div>
<div class="pattern-code">.col-f3</div>
</div>
</div>
<div class="row">
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 4</div>
<div class="pattern-code">.col-f4</div>
</div>
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 4</div>
<div class="pattern-code">.col-f4</div>
</div>
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 4</div>
<div class="pattern-code">.col-f4</div>
</div>
</div>
<div class="row">
<div class="coltest col-f5">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 5</div>
<div class="pattern-code">.col-f5</div>
</div>
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f4">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 5</div>
<div class="pattern-code">.col-f5</div>
</div>
</div>
<div class="row">
<div class="coltest col-f6">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 6</div>
<div class="pattern-code">.col-f6</div>
</div>
<div class="coltest col-f6">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 6</div>
<div class="pattern-code">.col-f6</div>
</div>
</div>
<div class="row">
<div class="coltest col-f7">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 7</div>
<div class="pattern-code">.col-f7</div>
</div>
<div class="coltest col-f5">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 5</div>
<div class="pattern-code">.col-f5</div>
</div>
</div>
<div class="row">
<div class="coltest col-f8">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 8</div>
<div class="pattern-code">.col-f8</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
</div>
<div class="row">
<div class="coltest col-f9">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 9</div>
<div class="pattern-code">.col-f9</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
</div>
<div class="row">
<div class="coltest col-f10">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 10</div>
<div class="pattern-code">.col-f10</div>
</div>
<div class="coltest col-f2">
<div class="pattern-content row">
<div class="placeholder-lg"></div>
</div>
<div class="pattern-name">col 2</div>
<div class="pattern-code">.col-f2</div>
</div>
</div>
<div class="row">
<div class="coltest col-f11">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 11</div>
<div class="pattern-code">.col-f11</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
</div>
<div class="row">
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder"></div>
</div>
<div class="pattern-name">col 1</div>
<div class="pattern-code">.col-f1</div>
</div>
<div class="coltest col-f1">
<div class="pattern-content row">
<div class="placeholder-sm"></div>
</div>
<div class="pattern-name">col 1</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 1</div>
<div class="pattern-code">.col-f1</div>
</div>
</div>
</div>
/* No context defined for this component. */