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:

.column.half

.column.half.last

.column.third

.column.third

.column.third.last

.column.fourth

.column.fourth

.column.fourth

.column.fourth.last

You can also use traditional n/12 keywords to control widths:

.column.twelve

.column.six

.column.three

.column.three

.one

.column.two

.column.four

.column.five.last

You can .push- columns to shift them further from their default position:

.column.three.push-one .column.three.push-two.last

You can also start stacking from the .right :

.column.right.five .column.right.three.push-one

No gutters .reset columns to remove gutter space:

.column.half.reset

.column.three.reset

.column.three.reset

.column.three.reset.push-one

.column.four.reset

.column.three.reset

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

.column.fixed

You can start stacking this from the .right as well:

.column.fluid.right > .column-content

.column.fixed.right

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:

How is it going?