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 row
s and child col
s. 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">This float-based layout has a max width of 928px and results in a 24px gutter between columns.</p>
<div class="standard-grid">
<div class="grid">
<div class="coltest grid-width-12">
<div class="pattern-name">width 12</div>
<div class="pattern-code">.grid-width-12</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-6">
<div class="pattern-name">width 6</div>
<div class="pattern-code">.grid-width-6</div>
</div>
<div class="coltest grid-width-6">
<div class="pattern-name">width 6</div>
<div class="pattern-code">.grid-width-6</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-4">
<div class="pattern-name">width 4</div>
<div class="pattern-code">.grid-width-4</div>
</div>
<div class="coltest grid-width-4">
<div class="pattern-name">width 4</div>
<div class="pattern-code">.grid-width-4</div>
</div>
<div class="coltest grid-width-4">
<div class="pattern-name">width 4</div>
<div class="pattern-code">.grid-width-4</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-3">
<div class="pattern-name">width 3</div>
<div class="pattern-code">.grid-width-3</div>
</div>
<div class="coltest grid-width-3">
<div class="pattern-name">width 3</div>
<div class="pattern-code">.grid-width-3</div>
</div>
<div class="coltest grid-width-3">
<div class="pattern-name">width 3</div>
<div class="pattern-code">.grid-width-3</div>
</div>
<div class="coltest grid-width-3">
<div class="pattern-name">width 3</div>
<div class="pattern-code">.grid-width-3</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
</div>
</div>
<p class="subhed sans-s6 fw700 lh-cap textblack">This float-based layout has a max width of 928px and results in a 24px gutter between columns.</p>
<div class="standard-grid">
<div class="grid">
<div class="coltest grid-width-12">
<div class="pattern-name">width 12</div>
<div class="pattern-code">.grid-width-12</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-6">
<div class="pattern-name">width 6</div>
<div class="pattern-code">.grid-width-6</div>
</div>
<div class="coltest grid-width-6">
<div class="pattern-name">width 6</div>
<div class="pattern-code">.grid-width-6</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-4">
<div class="pattern-name">width 4</div>
<div class="pattern-code">.grid-width-4</div>
</div>
<div class="coltest grid-width-4">
<div class="pattern-name">width 4</div>
<div class="pattern-code">.grid-width-4</div>
</div>
<div class="coltest grid-width-4">
<div class="pattern-name">width 4</div>
<div class="pattern-code">.grid-width-4</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-3">
<div class="pattern-name">width 3</div>
<div class="pattern-code">.grid-width-3</div>
</div>
<div class="coltest grid-width-3">
<div class="pattern-name">width 3</div>
<div class="pattern-code">.grid-width-3</div>
</div>
<div class="coltest grid-width-3">
<div class="pattern-name">width 3</div>
<div class="pattern-code">.grid-width-3</div>
</div>
<div class="coltest grid-width-3">
<div class="pattern-name">width 3</div>
<div class="pattern-code">.grid-width-3</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
<div class="coltest grid-width-2">
<div class="pattern-name">width 2</div>
<div class="pattern-code">.grid-width-2</div>
</div>
</div>
<div class="grid">
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
<div class="coltest grid-width-1">
<div class="pattern-name">w1</div>
</div>
</div>
</div>
/* No context defined for this component. */