3 ms·

Rolling Your Own Grid Layouts on the Fly Without a Framework

17 points by secondfret 15y ago

peteretep 15y ago
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 http://www.slideshare.net/riomusi/grids-are-good-2593754
- jvain 15y ago
  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 http://www.subtraction.com/2010/11/05/i-wrote-a-book
nhebb 15y ago
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/ http://grids.heroku.com/ is great. It doesn't suffer from the the cons that the author mentions - mainly bloat and overreach.
- oscilloscope 15y ago
  1 KB Grid is even more minimal, with no hack selectors like clearfix to puzzle over: http://www.1kbgrid.com/ http://www.1kbgrid.com/ http://www.1kbgrid.com/css/grid.css http://www.1kbgrid.com/css/grid.css - 960px example
pseudonimble 15y ago
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 15y ago
  A relevant SO question and an article for more in-depth analysis: http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected http://stackoverflow.com/questions/4308989/are-the-decimal-p... http://ejohn.org/blog/sub-pixel-problems-in-css/ http://ejohn.org/blog/sub-pixel-problems-in-css/
jackmoore 15y ago
> 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.

17 points by secondfret 15y ago

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 http://www.slideshare.net/riomusi/grids-are-good-2593754

jvain 15y ago
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 http://www.subtraction.com/2010/11/05/i-wrote-a-book

nhebb 15y ago

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/ http://grids.heroku.com/ is great. It doesn't suffer from the the cons that the author mentions - mainly bloat and overreach.

oscilloscope 15y ago
1 KB Grid is even more minimal, with no hack selectors like clearfix to puzzle over: http://www.1kbgrid.com/ http://www.1kbgrid.com/ http://www.1kbgrid.com/css/grid.css http://www.1kbgrid.com/css/grid.css - 960px example

pseudonimble 15y ago

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 15y ago
A relevant SO question and an article for more in-depth analysis: http://stackoverflow.com/questions/4308989/are-the-decimal-places-in-a-css-width-respected http://stackoverflow.com/questions/4308989/are-the-decimal-p... http://ejohn.org/blog/sub-pixel-problems-in-css/ http://ejohn.org/blog/sub-pixel-problems-in-css/

jackmoore 15y ago

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