The 1KB CSS Grid

sosuke · on Aug 11, 2009

My only issue with the CSS from this is on .column it specifies the display as inline and then with another class sets the width. I can't remember right now but I had particular issues when trying to do the same thing a year or so ago and it turns out that its not W3 spec. Without the inner p tag creating a display block element the grid breaks down. In short display inline elements cannot by themselves have width assigned to them.

http://www.w3.org/TR/2003/WD-CSS21-20030915/visuren.html#inl...

proee · on Aug 11, 2009

I've been using the 960.gs for a while now and really find it efficient. At first I was critical of such systems but the ability to reuse css classes is great and it's a nice having a starting point for new site layouts.

antidaily · on Aug 11, 2009

and 960.gs comes with photoshop and fireworks templates with guides already setup.

wmeredith · on Aug 12, 2009

No comment on the grid, really, but that's one gorgeous GUI.

fno · on Aug 12, 2009

I have to disagree, the font looks terrible for me (Windows XP, Opera). Maybe he forgot to use a good fallback font?

zackham · on Aug 11, 2009

I suppose this has its place for simple fixed width designs, but when you need something more flexible I love YUI grids (which they seem to be responding to with this simpler grids css)

erlanger · on Aug 12, 2009

  /* ================ */
  /* = The 1Kb Grid = */     /* 12 columns, 60 pixels each, with 20 pixel gutter */
  /* ================ */     /* Enjoy your tableless layout that acts like a table! */
  
  .grid_1 { width:60px; }
  .grid_2 { width:140px; }
  .grid_3 { width:220px; }
  .grid_4 { width:300px; }
  .grid_5 { width:380px; }
  .grid_6 { width:460px; }
  .grid_7 { width:540px; }
  .grid_8 { width:620px; }
  .grid_9 { width:700px; }
  .grid_10 { width:780px; }
  .grid_11 { width:860px; }
  .grid_12 { width:940px; }
  
  .column {
  	margin: 0 10px;
  	overflow: hidden; /* Bad call */
  	float: left;
  	display: inline; /* float: left implies display: block */
  }
  .row {
  	width: 960px;
  	margin: 0 auto;
  	overflow: hidden; /* Bad call */
  }
  .row .row {
  	margin: 0 -10px;
  	width: auto;
  	display: inline-block; /* Not well-supported */
  }