# Grid

Note: Requires @withFloatGrid: true; be set at compile time. Flex Grid is now the default for fusionCSS.

fusionCSS works off a 12 column fluid grid and supports a variable number of columns per row.

Column spans are available in 4 device widths, tiny, small, medium and large.

| Tiny | Small | Medium | Large
--- | --- | --- | --- | ---
Device Width | < 768px | ≥ 768px | ≥ 992px | ≥ 1200px
CSS Class | .span-tn | .span-sn | .span-mn | .span-ln

* Where n is the number of columns to span.

Selecting a span-s6 will use 6 columns for small, medium and large devices, while on tiny devices the grid will revert to a single column.

fusionCSS supports nesting of spans as well as out of order rendering of columns.

## The Grid

The column widths are specified with the span class, span classes range from span1 through to span12. span1 is 1/12 of the width of the containing row width while span6 is 6/12 of the width and span12 is the full width.

The sum of all columns in a row should add up to 12.

    <div class="row">
    	<div class="span-s6">span-s6</div>
    	<div class="span-s6">span-s6</div>
    </div>
    <div class="row">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>
    <div class="row">
    	<div class="span-s8">span-s8</div>
    	<div class="span-s4">span-s4</div>
    </div>

## Nested Grids

The grid can be nested as required by adding rows within the outer spans.

    <div class="row">
    	<div class="span-s6">span-s6</div>
    	<div class="span-s6">span-s6</div>
    </div>
    <div class="row">
    	<div class="span-s6">
    		<div class="row">
    			<div class="span-s6">span-s6</div>
    			<div class="span-s6">span-s6</div>
    		</div>
    	<br />
    	</div>
    	<div class="span-s6">span-s6</div>
    </div>

## Offsets

In some cases you do not need a column to be present but rather you need a gap. The offset class which ranges from offset-t1 through to offset-t11 allows you to specify the number of columns to leave to the left of the selected span.

    <div class="row">
    	<div class="span-s6">span-s6</div>
    	<div class="span-s6">span-s6</div>
    </div>
    <div class="row">
    	<div class="span-t6 span-s3 offset-t3 offset-s6">span-s3 / t6</div>
    	<div class="span-t12 span-s3">span-s3</div>
    </div>
    <div class="row">
    	<div class="span-s4 offset-s8">span-s4</div>
    </div>

## Out of Order Columns

By default columns appear left to right in the order that they are defined within the HTML, however the span-d-pushn and span-d-pulln classes allow the display order to be adjusted.

Where d is the device width and n is the number of columns to span.

The column order can be change based on device width as the 3rd row demonstrates.

    <div class="row">
    	<div class="span-s6 span-s-push6">1st in HTML</div>
    	<div class="span-s6 span-s-pull6">2nd in HTML</div>
    </div>
    <div class="row">
    	<div class="span-s4 span-s-push8">1st</div>
    	<div class="span-s4">2nd</div>
    	<div class="span-s4 span-s-pull8">3rd</div>
    </div>
    <div class="row">
    	<div class="span-s4 span-s-push8 span-m-push4">1st</div>
    	<div class="span-s4 span-m-pull4">2nd</div>
    	<div class="span-s4 span-s-pull8 span-m-pull0">3rd</div>
    </div>

## Variable Column Widths

The column widths can be changed to match the device width, e.g. on a small device a 2 column layout may be chosen which adjusts to 4 column on a large device.

fusionCSS has a .75rem gutter on column spans, this can be removed with the no-gutter, no-left-gutter and no-right-gutter classes, this is useful for having span contents butt up against each other.

    <div class="row">
    	<div class="span-t12 span-s3 span-m6">t12 / s3 / m6</div>
    	<div class="span-t6 span-s3 span-m6">t6 / s3 / m6</div>
    	<div class="span-t6 span-s3 span-m6">t6 / s3 / m6</div>
    	<div class="span-t12 span-s3 span-m6 no-left-gutter no-right-gutter">
    	t12 / s3 / m6
    		<img src="large.jpg" alt="test" />
    	</div>
    </div>

## Gutters

The gutters can be enabled or disabled depending on the width.

    <div class="row">
    	<div class="span-s6 no-right-gutter-s gutter-m">
    		<img src="large.jpg" alt="test" />
    	</div>
    	<div class="span-s6 no-right-gutter-s gutter-m">
    		<img src="large.jpg" alt="test" />
    	</div>
    </div>

Top