Rolling Your Own Grid Layouts on the Fly Without a Framework

I did this recently. I ended up using lesscss for the gory details:

  @space: 10px;
  @block: 60px;
  .block-width ( @blocks ) { width: (@block * @blocks) + ((@blocks - 1) * (@space * 2) ); }

I consider this to be the canonical piece on grid-based design:

http://www.slideshare.net/riomusi/grids-are-good-2593754

I know it's popular to be a contrarian, but for us non web designers who occasionally need to do page layout, the 960 Grid generator at http://grids.heroku.com/ is great. It doesn't suffer from the the cons that the author mentions - mainly bloat and overreach.

> I also threw a “last” class on the last column to help us clear the margin.

FYI, excluding IE6, :first-child pseudo-class is universally supported. That would be a cleaner way to handle this rather than manually adding a class to the markup.

Pretty sure you can't have a width of 222.75px, it would be rounded up to the nearest pixel and wouldn't fit in the container.