Fluid grid
Columns are stacked from left to right, no wrappers are required. Mark the .last column of the row, and use .clear after rows (or .clear-after the parent) if needed. Columns within columns work just fine. Include your customized breakpoints to progressively enhance the column layouts to fit each screen size.
Note! Browsers have to do rounding with fractional column/gutter widths, so you can't always control fluid grid per pixel.
Use fractional keywords as class names to control the width of each column, like this:
You can also use traditional n/12 keywords to control widths:
You can .push- columns to shift them further from their default position:
.column.three.push-two.last
You can also start stacking from the .right:
.column.right.three.push-one
No gutters
.reset columns to remove gutter space:
.column.three.reset.push-one
column.half.push-fourth.reset
Fixed + fluid columns
One part gets a fixed width, the other side fills the rest. Very handy for combining images with a fluid grid. Multiple combinations can be nested. The fluid column always comes first in markup.
You can adjust the size of the fixed-width in steps with media queries, or break the combination completely.
.column.fluid > .column-content
You can start stacking this from the .right as well:
.column.fluid.right > .column-content
Customize
Use this CSS to adjust the width of the fixed column (default is 10em):
/*Fixed column width*/
.column.fixed {
width: 10em;
}
.column.fluid > .column-content {
margin-right: 10em;
}
.column.fluid.right > .column-content {
margin-left: 10em;
}
Progressive enhancement
The columns we used in the previous samples never break. We can extend them to present different layouts in viewports larger than specific breakpoints (which you can customize in the download section).
Here, users see 2 columns by default, 3 + 1 on .small- screens and 4 on .large- screens:
.column.half.small-third.medium-fourth
.column.half.last.small-third.medium-fourth
.column.half.small-third.small-last.medium-fourth
.column.half.last.small-full.medium-fourth.medium-last
Remember to mark the .last- column for each screen size when you're not .resetting gutters. You can also mark the .first- column of each row if it changes between screen sizes.
Note! Don't skip levels: if you use .small- and .large-, also include .medium- so the columns work as expected.
We can make quite complicated arrangements without nested columns or parents:
.column.small-third.medium-full.large-half
.column.small-twothirds.small-last.medium-half.large-fourth
.column.medium-half.medium-last.large-fourth.large-last
You can also .-break columns (but this can't be undone on further levels):
.column.reset.fourth.medium-third.large-break
.column.reset.fourth.medium-twothirds.medium-last.large-break
.column.reset.half.last.medium-break
Rows
.rows are also available. .row-content is aligned to the center of its parent, and controlling its max-width results in a layout that scales down automatically but doesn't get too wide on large screens.
The default max-width of .row-content is 70em, but here it's set to 40em for clarity:
.row-content > .column.half
.row-content > .column.half.last
.buffer gives the content some breathing room:
.row-content.buffer > .column.half
.row-content.buffer > .column.half.last
By default, .buffer has less padding on the top (as seen above). This works well for natural article content, but you can use .even buffers, too:
You can naturally use any element (like section for example) for the rows. Use rows to build both the overall frame of your site and smaller pieces of page content.
