

The 1KB CSS Grid - chris24
http://www.1kbgrid.com/

======
sosuke
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...](http://www.w3.org/TR/2003/WD-
CSS21-20030915/visuren.html#inline-formatting)

------
proee
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
and 960.gs comes with photoshop and fireworks templates with guides already
setup.

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

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

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

      /* ================ */
      /* = 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 */
      }

