The 1Kb CSS Grid, Part 1
CSS frameworks have become quite popular over the past couple of years. Some of them try to fit in everything: a grid system, a style reset, basic typography, form styles, you name it. Others focus solely on the grid, but still end up a bit bloated.
With added complexity comes… well, complexity: a steeper learning curve, increased development time, and — cringe — tougher debugging.
Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight. And, as I’ll show in part 2, it can be used to streamline page templates for content management. All this in just one measly kilobyte (actually, 662 bytes, but who’s counting).
12 Columns, 960 pixels
The basic configuration is a 12 column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20 pixel gutter in between. While this is what I typically use in my designs, you could easily apply the same technique to other widths and other numbers of columns.
The CSS
Lets jump right in an have a look at the CSS. As you would expect, there is a class that corresponds to each of the possible column widths, units 1 through 12. We mentioned that each column is 60 pixels with a 20 pixel gutter between each column. Thus ‘.grid_2′ is calculated as 60 + 20 + 60 = 140 pixels.
In addition to the column widths, there are only two other classes defined: ‘column’ and ‘row’. The column class has a margin of 10 pixels applied to both the left and right edges, resulting in a cumulative 20 pixel gutter. Also note the ‘overflow: hidden’ attribute applied to both column and row. The real purpose of this technique is to clear floats, circumventing the need for a ‘clear: both’ declaration. Finally, we need to set the ‘display: inline’ property on ‘.column’ to prevent the double-margin bug in IE6.
.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 {
float: left;
margin: 0 10px;
overflow: hidden;
display: inline;
}
.row {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
The HTML
The HTML is as minimal as the CSS. Each column contains a class indicating its width. Columns are then contained by a row, which serves to clear the floating columns (and is also instrumental in page templating, to be discussed in part 2). The only thing to remember is that the unit of columns inside a row must always add up to 12 (it is a 12 column grid, after all).
<div class="row"> <div class="column grid_4"> </div> <div class="column grid_4"> </div> <div class="column grid_4"> </div> </div> <div class="row"> <div class="column grid_8"> </div> <div class="column grid_4"> </div> </div> <div class="row"> <div class="column grid_2"> </div> <div class="column grid_4"> </div> <div class="column grid_3"> </div> <div class="column grid_3"> </div> </div>
Take it for a spin
That wasn’t so painful, now was it? Beats going to the dentist, at least. Take a look at what we’ve accomplished so far. Then, download the demo and get cracking!
Tune in for part 2 and discover how to use the grid to streamline your page templates for content management.
UPDATE (2009.06.06): Read part 2 here.
Nice one.
Seems easy to use. One suggestion though: you should add “zoom: 1;” on both the .column and .row elements. Quick fix for IE 6, else it won’t clear the floats.
Looks nice. Will give it a try.
That’s pretty smart, getting rid of .last etc., but perhaps you’re heading a little down the divitis route by wrapping everything in .row.
A basics grid without the additional typography is a very good idea, though.
But why? HTML is not supposed to be presentational – using .row and .column is almost as bad as going back to table layouts… ;)
I do agree with Jonas that you’re violating the separation of markup and presentation here. As for Jerome’s comment: zoom is not a valid css property. The floats are causing trouble in IE6, but that’s because of the double-margin-bug. adding “display: inline;” to .column fixes this problem (and does not affect modern browsers)
[...] The 1Kb CSS Grid, Part 1 « Usability Postusabilitypost.com [...]
div column
div row
div row
div row
/div column
tr
td
td
td
/tr
Hrm, they look remarkably similar. Why use CSS? The table elements already do the work of aligning rows and columns. It seems strange to recreate this layout using CSS when the markup produced has no more semantic meaning that the ‘outdated’ table way.
Maybe I have missed the point here.
Guess someone here might be interested in my grid framework solution which truly solves the grid problems in a different way from the other well known frameworks out there.
http://github.com/teddyzetterlund/simple-css-grid/
“Unlike most other grid systems you find on the interwebs Simple CSS grid does not require any “first/last-column” classes or “clearing elements”.”
It does have one major drawback though, but not a lot of people care for it anymore – not even the most well known CSS guru’s. It won’t respect your browsers default font-size.
jaronbarends: I use the zoom attribute a lot nowdays. Reason? It makes it easier to point of which CSS is IE6/IE7 fixes and what is not. Having CSS validate isn’t all that important if you’re confident in your skills. CSS3 attributes and vendor specific attributes doesn’t validate either but they are extremely useful.
popurls.com // popular today…
story has entered the popular today section on popurls.com…
Jaron is exactly right: “display: inline;” should be added to the column class to fix IE6’s double margin bug. Thanks for catching that!
For those of you who dislike the .row divs, may I remind you that inserting a div class=”clear” or appending a “clearfix” class to clear the float (960.gs) is just as much work as inserting a div class=”row”, but they have the downside of preventing you from manipulating side-by-side columns in unison. The other solution, appending “first” and “last” classes to columns (blueprint) is no better.
I think rows and columns make sense because they are the basic building blocks of most websites. Hiding behind more abstract semantics because they have less resemblance to “evil tables” only adds confusion and complexity, and I think denies the real nature of website layout.
Even http://code.google.com/p/the-golden-grid/ is less than 1kb and http://code.google.com/p/malo/ is 0,25kb.
I think that the grid design is not just how but why?
However we should continue experimenting with CSS and try new ways of doing layouts.
looks very interesting. i’ll give this a try. thanks for posting!
Teddy Zetterlund: I totally agree that css validation should never be a goal in itself, and when you know what you’re doing I don’t see much harm in using non-standard code. However, when posting tips on the internet, you never know the level of expertise of the people applying your tips, so I prefer to give them the right example. Also, I hardly ever find the need to resort to non-standard code.
CSS3 validates just fine (you have to choose appropriate profile in validator.
Vendor extensions are another story, they are allowed in the spec, but CSS validator fails to recognize that :(
The reason for using divs instead of table elements is that if you strip away the presentational aspect of a page using divs, you’re left with the raw content, and a bunch of—essentially—anonymous elements with classes and IDs. A div (and a span) has no implied meaning, unlike a table, which means “this is a table of data”, which means it takes on the meaning of the enclosed content and nothing beyond that.
Moving away from mixed content and presentation is a good thing from many perspectives, but it doesn’t mean that things like tables didn’t provide useful mechanisms layout-wise: CSS -should- be able to provide those same facilities (and nowadays, largely does).
Nice job making a simple grid. Less code = less confusion. Cheers!
Its been easy to use.
Column css design is quite simpler design than padding.
Not convinced by the tabular layout, but I am no more convinced by reusing the same grid template over projects either…
I will still read your second part, though ;)
Yes – there’s nowt ‘incorrect’ with divs and spans as they don’t mean anything;
table, on the other hand, would be confusing as you’re not marking up tabular data.I don’t really see how using
<div class="col1">is less ‘meaningful’ than something like<div class="byline">, except to the person reading the markup. It doesn’t make any difference to the person reading the page.Sigh. Let’s all make silly grids and diss the frameworks.
I have to agree with Mo and Leon on this one. Using DIVs to form a table structure gives you the physical foundation of a TABLE layout without misleading browsers and search engines as to the page’s content. By all means, use TABLEs in your site designs, but only for DATA that *should* be in a TABLE (calendar, statistics, etc).
Jonas mentioned earlier that HTML was not supposed to be presentational. I’d actually take that a step further and say that it wasn’t supposed to be presentational *for graphics and user interfaces,* but rather textual documentation. CSS (the technology used to create this awesome 1Kb grid) is useless without HTML and provides the positioning needed for this layout. So unless you plan on building a site completely in flash, we’re all “stuck” with HTML/CSS regardless of how “presentational” they may or may not be!
Sweet grid BTW =D
Going to try this with a new site I am working on, thanks for the tip!
Thanks for the post Tyler :) Updated it with the IE6 fix.
About tables vs div thing: Of course there’s the whole separation from presentation argument, but whether you’re a purist or pragmatist, there is one advantage to building this “faux table” structure: you can modify the layout and its behavior completely in CSS. A table is very rigid, so you won’t be able to separate the cells (which is actually one big advantage in certain cases), but divs are free to be manipulated as you like.
[...] The 1Kb CSS Grid, Part 1 « Usability Post (tags: webdesign css web design layout framework grid grids) [...]
i’m glad to hear this, and i want to say, half year’s ago, i have released the “sparkle-960-css-grid” in http://code.google.com/p/sparkle960/ ,it’s based on Nathan Smith’s 960-system too. and the principle is the same to yours. but you’re smaller than mine.
Looks good.
I was just wondering what if I want a nested col in col? Then I won’t be able to use class .column, otherwise I’ll end up with wrong width caused by inner col margins.
What’s the best approach in this case?
Thank you
[...] The 1Kb CSS Grid, Part 1 via Usability Post [...]
Thank you for this post. I’ll have to give this one a try. Interested to see the upcoming post on streamlining for content management. Thanks again.
Looks interesting ! I’ll give it a try.
But still, this technique of creating rows and columns isn’t in the spirit of the CSS / HTML separation. You should be able to create the structure of a page without having to think about the design, which is not the case here.
Here a example. You have 6 small boxes. You could display them in 2 rows and 3 columns or 3 rows and 2 columns. This should only be done in the CSS and not in the HTML structure.
[...] The 1Kb CSS Grid, Part 1 – Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight. And, as I’ll show in part 2, it can be used to streamline page templates for content management. All this in just one measly kilobyte (actually, 662 bytes, but who’s counting). [...]
[...] The 1k CSS Grid [...]
I believe it is not only table like layout but also time consuming and difficult!
[...] The 1Kb CSS Grid, Part 1 « Usability Post – The 1Kb CSS Grid [...]
[...] The 1kb CSS Grid (Part 1) A CSS grid loosely based on the 960 system. It’s extremely lightweight and can be used to streamline page templates for most CMS’s. Worth a look. [...]
[...] The 1Kb CSS Grid, Part 1 [...]
I think your grid background (grid.png) is a pixel too far left, you may want to check that.
the additional .column class leads to css reduction and adds some unnecessary and presentational html. using predefined grid classes will always be unsemantical, so separation of presentation and structure can’t be accomplished. if you already decided to go this practical way, why not rename .column with .grid and .grid_XX with .XX, so instead of markup like
div class="column grid_12"you would end up withdiv class="grid 12"which seems even more minimal and readable
I’ve been trying CSS Framework for a while and I must say that now I’m stuck with the 960css grid for its power and flexibility as well as the small footprint you were mentioning.
This is in my opinion the best Framework to design great flexible websites and making sure they look the same on any browser (as far as only grid placement is concerned).
I know that the two last design I made were successful thanks to this framework ! :)
@korbinian even though a quick search didnt show anything conclusive in the HTML specs, I’m not sure if a class name is allowed to start with a number. w3schools even says it wont work in FF.
I like the idea, though.
@triplezero Why not simply add a character before the column?
div class="grid g12"Or maybe
div class="col c12"Very interesting!
To be honest, I still prefer fluid designs with variable width between a defined min-width and max-width for the main container.
I think korbinian polk meant it to be “grid_12″ rather than “grid 12″. So basically, just define all the column properties for all the grid selectors (can just add the list of them, separated by commas, to the .column selector). This way you won’t need the column class at all.
[...] would’ve thought you could have a usable CSS grid that weighs in at under 1 kilobyte? Then again, you would’ve saved more than a KB if you coded your content blocks without a [...]
@Dmitry no, i DID mean “grid 12″. to define all the column properties to all the grid selectors means redundant css. and we want to be minimal here, right? i am only proposing more readable classes. but i am not sure if this is a good idea.
@triplezero didn’t think of that, have to do some research
I agree with Cyril. Writing markup in this fashion, although an improvement on a table-based layout, is still focused very much on the final presentation.
The point of CSS is to completely separate markup from presentation. Establishing a grid like this limits you in the future as the design changes. Remember the CSS Zen Garden? That’s how markup needs to be written IMHO. Imagine the limitations “col-2″ and “row” would have imposed on those designs.
Sure, you could still write a CSS rule to target a specific div, but what a complete maintenance nightmare… “yes, .row .col .grid5 is really that login form at the top right of the page.” I’ll take form#login-form over that any day.
Korbinian: There shouldn’t be much redundant CSS. It’s just: .grid_1, .grid_2, .grid_3 … { } — and you can specify it all in one place right there, the selector will just be quite long, but I think it’s still a compact way to do it. Then you can work with just two classes, rows and grids, making .column obsolete :)
Mark: You can still give individual divs (or rows) their own ids. Sure, more presentational markup, but we can still retain the flexibility if we want it.
By the way, stumbled onto this article a day ago: http://www.vcarrer.com/2009/06.....ework.html — the 1 line framework. Quite interesting as well, but trickier to use.
[...] The 1Kb CSS Grid, Part 1 [Usability Post] //tweetmeme_style = ‘compact’; tweetmeme_url = ‘http://www.webmaster-source.com/2009/06/02/the-1kb-css-grid/’; tweetmeme_source = ‘redwall_hp’; [...]
I am happy to hear that the discussion is centered around simplifying the grid further rather than making it more complex. That is always a good sign!
A couple of things to consider surrounding the ‘.column’ / ‘.grid_x’ debate is that there may be instances when it is helpful to target all of the columns in a given row. If the ‘.column’ class were completely removed, this would not be possible without using the ‘.row > div’ selector, which wouldn’t work in IE6. Furthermore, there may also be instances when it is helpful to apply a width via the ‘.grid_x’ class to an element without it having to necessarily be a column (and the float and margin baggage that comes along with being a column). Both of these are arguments for keeping a ‘.column’ class. But perhaps they are both corner cases that don’t occur enough to justify the added complexity?
Aha, now that makes sense Tyler :) I guess you could still get around these issues by adding additional ids to rows and other elements. Hard to say whether it will be leaner or not instead of keeping the column class.
[...] Part 1 we covered how to setup a lightweight CSS grid. I promised that this same grid could streamline the [...]
[...] the left corner: Tyler Tate’s 1KB CSS Grid, a lean framework sporting 14 classes and the familiar conventions for enforcing a visual grid via [...]
This looks nice and simple! I think I’m going to try implementing this with Sass so that instead of adding all those unsemantic classes everybody hates, I can use mixins to apply the rules directly to the elements/classes.
for example:
Sass:
=grid_6
:width 460px
=column
:float left
:margin 0 10px
:overflow hidden
:display inline
=row
:width 960px
:margin 0 auto
:overflow hidden
#some_element
+row
… other styling rules
div
+column
+grid_6
… other styling rules
and your HTML:
<div id="some_element">
<div>lorem</div>
<div>ipsum</div>
</div>
It will result in a larger stylesheet, especially if you use ‘.column’ as a mixin and you don’t take full advantage of inheritance, but that’s the trade-in for fully semantic html.
Sorry for the rubbish example code, I haven’t tested it so I hope it’s right and makes sense!
(I cant seem to get the formatting right on the <code> tags with the sass inside!)
I think this is a good reaching of CSS. Although it looks like a table-marking as some comments above, but in general, this idea can use in CSS, and reduce our works.
Thank you very much.
[...] The 1Kb CSS Grid — Une grille minimaliste qui tient en 15 déclarations CSS. Idéale pour les débutant qui veulent comprendre le principe général des framework et pour les intégrateurs aguerris qui verront là un moyen économique pour donner du rythme horizontal à leur mise en page. Suggéré par Darklg) [...]
Thanks for this one mate! I think I’ll start implementing this :)
[...] small as you can get and works around the principle that every column can be divided by two. This 1kb css grid offers a little more flexibility for slightly more code but at this size who’s [...]
[...] Part 1 we discussed the merits of a lightweight CSS grid. In Part 2 we talked about how the grid can [...]
[...] Introduction [...]
[...] Introduction [...]
[...] Introduction [...]
[...] Introduction [...]
This is amazing! I’ve never seen an easier to use grid system. I was really interested in grid-based design, but it always seemed so complex and the frameworks were ridiculous.
[...] Introduction [...]
After frying my brain building a couple of sites with Nathan Smith’s 960grid, Tyler Tate deserves a medal as far as I’m concerned. This is just what I was looking for; a CSS technique that’s lightweight, easy to use, offering fast product delivery to the client.
I slapped together a starter site just for grins and it works, loads and validates perfectly. I see no problem at all; in fact, guess what I’ll be building my next website with? :)
What’s with all the whining? Maybe they haven’t read part two yet.
Hey thanks Tyler for a great CSS grid!
John Barremore
Houston, TX
[...] Pour en savoir plus je vous invite à lire cet article. [...]
[...] Introduction [...]
Hello,
your framework is amazing, i start to use it for my next website.
i modify the framework, and now i can resize and move elements in cell:
.column {
float: left;
margin: 0 10px;
*overflow: hidden;
display: inline;
}
.column *{
position: relative;
height: 100%;
}
For exemple, to move and resize an element:
#contenu{
line-height: 110px;
top: 80px;
left: -80px;
width: 500px;
}
congratulation for the 1kb grid.
ps: sorry for my english, i’m french ^^.
what if i just want 10px on the left like .alpha in 960 gs?
[...] An Introduction [...]
[...] The 1Kb CSS Grid, Part 1 [...]
I am using the 1kb grid system on several sites and it works very well
[...] around by Tyler Tate. He’s got a few articles, too. I’d suggest reading all of them: part 1, part 2, and part [...]