An intuitive, flexible CSS grid with minimal footprint
This grid system requires a parent element with the class grid
applied to it. It will then treat all children as grid items (no asterisk selector used).
The grid will have as many columns as it has child elements, but you can override the columns (think of the colspan
attribute). Media queries are in place to resize the rows for smaller screens, but you should expand these based on your use case.
Demo is available on JSFiddle
To use EasyGrid in your project, include it in your HTML:
<link href="assets/css/grid.css" rel="stylesheet" type="text/css" />
Example base grid markup:
<div class="grid">
<div>1/2</div>
<aside>1/2</aside>
</div>
Example using override classes:
<div class="grid">
<div class="grid-1-3">1/3</div>
<div class="grid-2-3">2/3</div>
</div>
Example with a form (oh yes):
<form class="grid" method="get" action="">
<input type="text" name="name" placeholder="1/3" />
<input type="email" name="email" placeholder="1/3" />
<input type="submit" value="1/3" />
</form>