

Rolling Your Own Grid Layouts on the Fly Without a Framework - secondfret
http://designshack.co.uk/articles/css/rolling-your-own-grid-layouts-on-the-fly-without-a-framework/

======
peteretep
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>

~~~
jvain
There's a new book from Khoi Vinh, just read it and liked it a lot. Also it's
the first book on applying grid based design on web sites instead of print:

<http://www.subtraction.com/2010/11/05/i-wrote-a-book>

------
nhebb
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.

~~~
oscilloscope
1 KB Grid is even more minimal, with no hack selectors like clearfix to puzzle
over:

<http://www.1kbgrid.com/>

<http://www.1kbgrid.com/css/grid.css> \- 960px example

------
jackmoore
> 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.

------
pseudonimble
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.

~~~
superchink
A relevant SO question and an article for more in-depth analysis:

[http://stackoverflow.com/questions/4308989/are-the-
decimal-p...](http://stackoverflow.com/questions/4308989/are-the-decimal-
places-in-a-css-width-respected)

<http://ejohn.org/blog/sub-pixel-problems-in-css/>

