hella

A super-tiny, feature-rich, gracefully-degrading, responsive css grid.
Works on all modern browser and Internet Explorer 11.
Get it on github.

<div class="grid">
	<div class="row">
		<div class="column six">
			hella
		</div>
	</div>	
</div>

fluid heights

Columns will always take the height of the tallest column in the row.

<div class="row">
	<div class="column three" style="height:92px"></div>
	<div class="column nine"></div>
</div>

column offsets

Offsets are great for when you need to position elements in a non-standard way.

<div class="column six offset-six"></div>

Several popular css grid frameworks don't apply offsets properly when stacked beside eachother. Not hella.

<div class="row">
	<div class="column two"></div>
	<div class="column six offset-four"></div>
</div>

They're also great for centering columns.

<div class="column six offset-three"></div>
non-responsive

Rows with the non-responsive class will not resize their content on small screens.

<div class="row non-responsive">
	<div class="column six"></div>
	<div class="column six"></div>
</div>

Offsets will also be preserved

<div class="row">
	<div class="column six offset-six non-responsive"></div>
</div>
hide columns on different screen sizes

Only displays on large screens:

Only displays on small screens:

<div class="row">
	<div class="column large-only"></div>
	<div class="column small-only"></div>
</div>
infinitely nest columns

Nested columns will treat their parent container like a full width, and scale accordingly.

<div class="row">
    <div class="column six"></div>
    <div class="column six">
        <div class="row">
            <div class="column six"></div>
            <div class="column six">
                <div class="row">
                    //infinity
                </div>
            </div>
        </div>
    </div>
</div>
remove column margins

Sometimes you need columns to butt right up against eachother. Alright.

Since hella applies margins to the right, you don't need to use the no-margin tag on the last column in the row. But you can if you still want to :^)

<div class="row">
	<div class="column four no-margin"></div>
	<div class="column four no-margin"></div>
	<div class="column four"></div>
</div>
graceful degredation

Columns will always display at 100% width in browsers that don't support media queries.

non-responsive, offset, no-margin, large-only and small-only tags will be unavailable on these browsers as well.