Keep it Simple Stupid (KISS) Grid

A functional grid system in only 9 lines of CSS. Compatible with IE 7 and above!


Try it out

Add any number of child div elements to a .grid and they will automatically form equal sized columns:

Column

How to use it

Either download the CSS file or copy the CSS code below to create the foundation of the grid:

KISS Grid CSS


  .grid {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .grid > div {
    display: table-cell;
    vertical-align: top;
  }
            

Example HTML


  <div class="grid">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
    <div>Six</div>
  </div>
            

Which should result in this (styled for demonstration purposes):

One
Two
Three
Four
Five
Six

And that's it! The .grid element will act as a full-width row, and its direct children div elements become flexible, class-agnostic, equal-width columns.

Vertical Alignment

Create your own class for the div column elements with the attribute vertical-align: top|middle|bottom; to align your content. Make sure to nest your child class with .grid for the attributes to properly cascade. By default the columns are aligned to the top.

Example CSS


  .grid > .top {
    vertical-align: top;
  }
  .grid > .middle {
    vertical-align: middle;
  }
  .grid > .bottom {
    vertical-align: bottom;
  }
            

Example HTML


  <div class="grid">
    <div class="top">
      ...
    </div>
    <div class="middle">
      ...
    </div>
    <div class="bottom">
      ...
    </div>
  </div>
            

The code above will output the following:

I'm content that is aligned to the top!
I'm content that is aligned to the middle!
I'm content that is aligned to the bottom!

How-tos for responsive grids and other cool stuff coming soon! Or you can figure it out yourself. :)