# Flex Grid

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.

span-s6
span-s6
span-s3
span-s3
span-s3
span-s3
span-s8
span-s4

    <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.

span-s6
span-s6
span-s6
span-s6
span-s6
span-s6

    <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.

span-s6
span-s6
span-s3 / t6
span-s3
span-s4

    <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>

## Justify Content

justifty-content-* classes change the alignment of items in a row.

span-s3
span-s3
span-s3
span-s3
span-s3
span-s3
span-s3
span-s3
span-s3
span-s3

    <div class="row justify-content-t-start">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>
    <div class="row justify-content-t-center">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>
    <div class="row justify-content-t-end">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>
    <div class="row justify-content-t-around">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>
    <div class="row justify-content-t-between">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>

## Align Items

align-items-* classes change the vertical alignment of items in a row.

span-s3
span-s3
span-s3
span-s3
span-s3
span-s3
span-s3
span-s3
span-s3
span-s3

    <div class="row align-items-t-start justify-content-t-center">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>
    <div class="row align-items-t-center justify-content-t-center">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>
    <div class="row align-items-t-end justify-content-t-center">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>
    <div class="row align-items-t-stretch justify-content-t-center">
    	<div class="span-s3">span-s3</div>
    	<div class="span-s3">span-s3</div>
    </div>
    <div class="row align-items-t-baseline justify-content-t-center">
    	<div class="span-s3" style="line-height: 3rem;">span-s3</div>
    	<div class="span-s3">span-s3</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 order-dn 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.

1st in HTML
2nd in HTML
1st
2nd
3rd
1st
2nd
3rd

    <div class="row">
    	<div class="span-s6 order-s2">1st in HTML</div>
    	<div class="span-s6 order-s1">2nd in HTML</div>
    </div>
    <div class="row">
    	<div class="span-s4 order-s3">1st</div>
    	<div class="span-s4 order-s2">2nd</div>
    	<div class="span-s4 order-s1">3rd</div>
    </div>
    <div class="row">
    	<div class="span-s4 order-s2 order-m3">1st</div>
    	<div class="span-s4 order-s1 order-m1">2nd</div>
    	<div class="span-s4 order-s3 order-m2">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.

t12 / s3 / m6
t6 / s3 / m6
t6 / s3 / m6
t12 / s3 / m6

    <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>