Simple Grid System

Here's a simple way to build grids. It's not hard or complicated. Even making them flexible is easy.

HTML

<!-- Looks great in all browsers except IE7 & down -->

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<!-- Typical Main Content with a Side Bar. No gutters -->
<div class="grid">
  <div class="col-2-3">
      <p>Full Liquid Width</p>
  </div>
  <div class="col-1-3 add-color">
     <p>No Gutters Here</p>
  </div>
</div>

<div class="spacer"></div>

<!-- Main Content with a Left Side Bar -->
<div class="grid grid-pad">
  <div class="col-2-3 add-color">
     <p>Two-Thirds</p>
  </div>
  <div class="col-1-3">
     <p>One-Third</p>
  </div>
</div>

<div class="spacer"></div>

<!-- Main Content with a Right Side Bar -->
<div class="grid grid-pad">
  <div class="col-1-4">
     <p>One-Quarter</p>
  </div>
  <div class="col-3-4 add-color">
     <p>Three-Quarter</p>
  </div>
</div>
    
<div class="spacer"></div>

<!-- Main Content Area with a Left & Right Side Bar -->
<div class="grid grid-pad">
  <div class="col-1-8">
     <p>One-Eighth</p>
  </div>
  <div class="col-1-8 add-color">
     <p>One-Eighth</p>
  </div>
  <div class="col-1-2">
     <p>One-Half</p>
  </div>
  <div class="col-1-4 add-color">
     <p>One-Quarter</p>
  </div>
</div>

<div class="spacer"></div>

<!-- 2 Even Coulumns -->
<div class="grid grid-pad">
  <div class="col-1-2">
     <p>One-Half</p>
  </div>
  <div class="col-1-2 add-color">
     <p>One-Half</p>
  </div>
</div>

<div class="spacer"></div>

<!-- 3 Even Coulumns -->
<div class="grid grid-pad">
  <div class="col-1-3">
     <p>One-Third</p>
  </div>
  <div class="col-1-3 add-color">
     <p>One-Half</p>
  </div>
  <div class="col-1-3">
     <p>One-Third</p>
  </div>
</div>
    
<div class="spacer"></div>

<!-- 4 Even Coulumns -->
<div class="grid grid-pad">
  <div class="col-1-4">
     <p>One-Quarter</p>
  </div>
  <div class="col-1-4 add-color">
     <p>One-Quarter</p>
  </div>
  <div class="col-1-4">
    ...

CSS

/* Demo page Styles. Do not use these on your page */
body { margin:0; }
p {
  font-family: 'Yanone Kaffeesatz';
  margin: 0 6px;
  font-size: 14px;
  line-height: 22px;
}
.spacer { content: ""; height: 10px; }
.fixed {     /* Fixed Width div Example */
  margin: 0 auto;
  width: 600px;
}

/* Simple Grid System Styles
 * You can use your own semantic class names, ie. “blog” and “posts” in place of "grid" 
 * and "col" respectivly.
 * Remove any background-color from the columns. They are only there for Demonstration.
 */
[class*='col-'] {
  float: left;
  background-color: #789b2e;
}

.col-3-4 {
  width: 75%;
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-6 {
  width: 16.66%;
}
.col-1-8 {
  width: 12.5%;
}
.col-1-10 {
  width: 10%;
}

.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid-pad {
  padding: 10px;
  background-color: #dfdfdf;
}

/* Just to add color to the repeating columns - Remove before Flight */
.add-color {
  background-color: #d79800;
}