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