The 1KB CSS Grid(1kbgrid.com)

47 pointsby chris2417 yıl önce7 comments

http://www.1kbgrid.com/

7 comments

sosuke17 yıl önce

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

proee17 yıl önce

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.

antidaily17 yıl önce

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

wmeredith17 yıl önce

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

fno17 yıl önce

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

zackham17 yıl önce

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)

erlanger17 yıl önce

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