Hydra Grid

Hydra is a responsive CSS grid system utilizing inline-block and box-sizing for awesome resizing action. The grid uses twelve units by default and makes advanced layouts a breeze to build. The grid is supported by all modern browsers and IE >= 8.

Benefits and considerations

• No more .end or .last classes
• No more .clearfix and float hacks
• No more broken layouts at different sizes when grid cells wrap
• Construct responsive grids with minimal effort
• Unlimited level grid nesting
• SEO friendly .push-* and .pull-* classes
• Simple grid cell offset utilities
• Hybrid fixed and fluid with span combinations

Basic grid example

Basic grid HTML

For a simple two column layout, create a .grid-row and add a number of .grid-col-* units. The units can wrap to another line at different viewports without breaking functionality. Since the base grid has twelve units, create a number of units totalling twelve.

<div class="grid-row">
  <div class="grid-col-7">...</div>
  <div class="grid-col-5">...</div>
</div>

Nested units

<div class="grid-row">
  <div class="grid-col-12">Level 1</div>
  <div class="grid-col-9">
    <div class="grid-row">
      <div class="grid-col-6">Level 2</div>
      <div class="grid-col-6">Level 2</div>
    </div>
  </div>
  <div class="grid-col-3">Level 1</div>
</div>

Align grid units

Grids can easily be aligned by using the text-align css property.

Grid offets

Grid units can be offset using .grid-prefix-* and .grid-suffix-*. As the names suggest, they add space correspsonding to the grid units before and after the grid column.

<div class="grid-row">
  <div class="grid-col-1">1</div>
  <div class="grid-col-6 grid-prefix-2 grid-suffix-2">
    6 prefix 2 suffix 2
  </div>
  <div class="grid-col-1">1</div>
</div>

Hybrid units

The grid system allows for mixed fixed and fluid width units, which can be incredibly useful for content such as advertising units and sidebars. A simple sidebar can be created by adding a custom class that sets the float and width. E.g. .sidebar { float: left; width: 20em; }.

<div class="grid-row">
  <div class="grid-col-12">12</div>
  <div class="grid-col sidebar">Fixed width sidebar</div>
  <div class="grid-row">
    <div class="grid-col-12">12</div>
    <div class="grid-col-6">6</div>
    <div class="grid-col-6">6</div>
  </div>
</div>

Push and pull units

Grid units can easily be rearranged visually without affecting source order by using the built in .grid-push-* and .grid-pull-*. As the names suggest, these classes are measured by the grid system and are used to push or pull the units order.

<div class="grid-row">
  <div class="grid-col-6 grid-push-6">First</div>
  <div class="grid-col-6 grid-pull-6">Second</div>
</div>

---

Blake Embrey — @blakeembrey