Fluid columns grid

The template includes a complete CSS grid set, with 12 fluid columns and a simple syntax:

<div class="columns">

	<!-- First row -->
	<div class="three-columns">3 cols</div>
	<div class="nine-columns">9 cols</div>

	<!-- Second row -->
	<div class="new-row twelve-columns">12 cols</div>
</div>

The available size classes are:

one-column
two-columns
three-columns
four-columns
five-columns
six-columns
seven-columns
eight-columns
nine-columns
ten-columns
eleven-columns
twelve-columns

There is one extra class: new-row. This class is usefull to clear floats on a new grid line and avoid a higher block from pushing the following columns out of place.

Responsive columns

Using fluid columns on a responsive design can lead to really, really tiny columns on mobile screens, thus making them useless. The good news is there is also a set of classes to define columns size for each responsive width, so you can finely craft how your columns and content will look for each size.

How does it works?

On contrary of the whole template mobile-first logic, the columns are primarily designed for large screens. So start building your columns using the default grid above, and define how they resize down for every responsive layout.

To use columns sizes specific to a responsive size, add the following suffixes to the above class names:

*-tablet: Tablet and small screen
*-mobile: Mobile (both portrait and lanscape)
*-mobile-landscape: Mobile - landscape
*-mobile-portrait: Mobile - portrait

Note that each responsive size class defines the column size for its related screen size and the lower ones (unless there is a defined size for these). Here are some examples to help you understand how it works:

Classes applied to a column	Wide screen	Tablet	Mobile - landscape	Mobile - portrait
four-columns / six-columns-tablet / twelve-columns-mobile	4 columns	6 columns	12 columns
two-columns / four-columns-mobile-landscape / six-columns-mobile-portrait	2 columns		4 columns	6 columns
six-columns / twelve-columns-mobile	6 columns		12 columns

The new-row class also uses suffixes, you need to them it for every responsive size defined.

For instance, look at these columns below on a wide screen, then resize your browser window to see how they break into multiple rows and resize to always fit the available space while preserving the aspect ratio:

1 col

2 cols

3 cols

5 cols

<div class="columns">

	<div class="one-column two-columns-tablet three-columns-mobile-landscape six-columns-mobile-portrait">1 col</div>
	<div class="one-column two-columns-tablet three-columns-mobile-landscape six-columns-mobile-portrait">1 col</div>
	<div class="new-row-mobile-portrait two-columns three-columns-tablet six-columns-mobile-landscape twelve-columns-mobile-portrait">2 cols</div>
	<div class="new-row-mobile three-columns five-columns-tablet twelve-columns-mobile">3 cols</div>
	<div class="new-row-tablet new-row-mobile five-columns twelve-columns-tablet">5 cols</div>

</div>

Fixed columns

Two fixed-size columns styles are available, and are responsive too: on smaller screens, the fixed-size column is stacked on top of the fluid one - try resizing your browser to see it in action!

Fixed-size column

Fluid column

<div class="left-column-200px margin-bottom">

	<div class="left-column">
		Fixed-size column
	</div>

	<div class="right-column">
		Fluid column
	</div>

</div>