The 1KB CSS Grid

http://www.1kbgrid.com/

by chris24 • 17 years ago

47 7 17 years ago

proee• 17 years ago

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• 17 years ago

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

sosuke• 17 years ago

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

zackham• 17 years ago

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)

wmeredith• 17 years ago

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

fno• 17 years ago

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

erlanger• 17 years ago

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

The 1KB CSS Grid

Related Stories