A common feature of any modern website is responsiveness, having the page render appropriately to whatever device is displaying it rather than building a site specifically for that device. Almost all major CSS tools and frameworks include some form of a responsive grid that you can implement into your site. However, this can sometimes be massive overkill for the task at hand. Loading a full framework just to make use of a grid is like including jQuery into a project just to have slightly more convenient DOM selectors. Responsiveness is great, but adding a ton of code to handle something so simple is not. Luckily building your own responsive grid is really easy, only requiring a bit of basic math and CSS. 

I'm going to preempt this by saying if you are looking for a standard grid between 2-12 columns wide, and want to skip the framework, there are a number of generators out there that do what we're going to be doing below. Heck you could probably build your own if you are so inclined. I would most highly recommend the Responsive Grid System by Graham Miller, it produces straightforward quality code that you can plug directly into any website you may be building, and can save you a few minutes if you are in a bit of a rush. On top of that it showcases some really useful standards that you can use in your own grids, like resetting the margin of our first-child column and giving our clearfix a better name.

Alright, so let's take a look at how we go about calculating our grid. If you've done any work with responsiveness before you'll likely be familiar with the formula (Target / Context) * 100 = Result, which is essentially a simple measure of the relative size of a child element to it's parent. A fluid grid just takes this and extends it a touch to include multiple elements and the margin or spacing between them. 

Let's use an example of an 8 column grid with 2% margin spacing between the elements:

Style.css

/* Our basic CSS for any custom grid */
/* Gives us some useful standards to start off */

.column {
  display: block;
  float: left;
  margin-left: 2%;
}

.column:first-child {
  margin-left: 0;
}

/* Clearfix: I really like naming this 'group' when 
working with grids, as that tends to be what we are 
actually using it for in almost all cases */

.group:after { 
  content:"";
  display:table;
  clear: both;
}
.group {
  zoom:1;
}

To get the subdivisions for our columns we'll do some really simple calculations:

w = full width / # of columns
  = 100 / 8
  = 12.5
  
m = %margin / # of columns
  = 2 / 8
  = 0.25
  
subdivision = w + m
            = 12.75%

Now starting from 100% we just subtract this subdivision repeatedly, so in this case taking away 12.75% from our width each time:

Style.css

/* Our 8 column grid */
.eight_col {
  width: 100%;
}
.seven_col {
  width: 87.25%;
}
.six_col {
  width: 74.5%;
}
.five_col {
  width: 61.75%;
}
.four_col {
  width: 49%;
}
.three_col {
  width: 36.25%;
}
.two_col {
  width: 23.5%;
}
.one_col {
  width: 10.75%;
}

And voila, all we have to do is add any custom breakpoints and behaviour that we want with media queries, to handle when the user's screen size is adjusted. So for example if we wanted to swap to full width on mobile:

Style.css

/* Full width below 480px */
@media only screen and (max-width: 480px){
  .column {
    float: none;
    margin-left: 0;
  }
  .eight_col, .seven_col, .six_col, .five_col,
  .four_col, .three_col, .two_col, .one_col {
    width: 100%;
  }
}

And now you've got yourself a fully working responsive grid that you can add to your websites, all with just a few lines of CSS and some simple math. So if you ever find yourself reaching for a hefty framework that you don't really need, or you want to build a more highly customized grid, consider building it yourself; it's much easier than it may seem.

-Brad