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>