Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Grid-Based Web Design, Simplified

A grid at its barest is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals, but its innate propensity for creating order out of chaos makes it one of the most powerful tools at a designer’s disposal. If you want to reap their benefits of grids on your next project but are unsure of the specifics, this article is for you.

Grid-Based Web Design, Simplified

Introduction Link

Washington DC Grid plan
Grids are everywhere in our society, and have been for centuries, as this city plan1 for Washington, DC drawn in 1792 by Charles L’Enfant demonstrates.

If you’re even vaguely acquainted with the fundamentals of graphic design, you’ve probably worked on some kind of a grid or at the very least seen examples of grid-based layouts. Grids are an established design tool, and a wealth of knowledge exists in the literature discussing the theory of grids and extolling their benefits. I will make no attempt to summarize them here (if you want a good primer on grid theory, have a look at this piece by Mark Boulton).

Be sure to check out the following articles:

Instead, this article will attempt to explain how to put the theory of grid-based design into practice, taking into account the typical workflow of a Web design project. We’re not redesigning the BBC7 here, just looking for a flexible, effective solution for the small to medium-sized projects that a freelancer or small agency is likely to tackle.

The status quo, as it were Link

Josef Müller–Brockmann's Stadttheater Poster
This iconic poster by Josef Müller–Brockmann epitomizes early grid-based print design. It was created in 1959 to list showtimes for the Stadttheater (State Theater) of Switzerland in Zurich.

Use of the typographic grid in print design quickly achieved ubiquity following its popularization by modernist graphic designers in postwar Switzerland – the same school of thought that created our venerable Helvetica. While grids became entrenched in the culture of print design, factors such as the inconsistent interpretation of CSS across browsers and a lack of formal graphic design training among Web designers stifled the implementation of grids on the screen.

Times are changing, however. The Web standards renaissance has ignited interest in grids among innovators in the community, and a whole slew of CSS-based grid frameworks (like 960 Grid System8 and Blueprint9) have emerged and gained popularity, claiming to greatly reduce development time, all the while providing the same structure and unity that grids have afforded print layouts for so long. Problem solved, right? Not so fast.

While these prefab frameworks perform admirably if used as advertised, the problem is that many designers aren’t taking full advantage of them! From what I can gather based on observation and conversation with colleagues, some among us are deliberately avoiding the use of grids for fear that they will be limited in what they can do with the design. Nothing could be further from the truth!

Grid systems can facilitate creativity by providing a framework and already answer some designers’ questions such as ‘where should the folios go’, ‘how wide should the measure be?’ etc. A well designed grid system will go some way to answer these questions and more.

— Mark Boulton

In addition to strengthening your layouts, adopting a grid for consistent use in both your source files and code will streamline the entire development process and make future edits less painful. Choosing and using a prefab framework is one obvious answer, as a ton of documentation and resources are already available. Honestly, however, I don’t think they’re always appropriate for a simpler project. The number of columns in the default grid and the extra stylesheets can be overkill if all you need is a simple three or four column layout. The good news is that creating your own custom framework is very simple, and you’ll learn a thing or two in the process.

So where to begin? While some industry notables, namely Andy Clarke, have begun to advocate cutting out the Photoshop and going straight to the code10, this is not always a feasible or even desirable step. Many designers, myself included, find that creativity flows more freely into a graphics program, since elements are more easily created and manipulated in this environment than within the context of code. To properly execute a grid-based Web layout using the traditional Photoshop-to-code workflow, we need to back up a step and start designing static comps on a grid that mirrors the one on which the design will be coded.

Getting started Link

Fireworks and Photoshop logos

Before we get started creating a design comp, we’ll need to do a little math and some quick planning, then configure our software to create an environment that facilitates grid-based design. This tutorial assumes that you’re using either Photoshop or Fireworks, but virtually every piece of graphic design software on the market has similar features.

Choosing a base unit Link

American football gridiron

The American football field is laid out on a grid with a base unit of one yard. Every five yards, the hash marks are replaced with a gridline that crosses the entire field, making it easier for players, spectators and officials to understand where the play is taking place, no matter where they are standing.

10 pixel grid
Similarly, our grid will have a base unit of one pixel, but every 10 pixels a gridline will help us align objects relative to the page as a whole.

First consider the medium. Since we are designing for the screen, we will use pixels as our base units of measurement. As I’m sure you’re aware, however, individual pixels are far too small to form a grid to which we can easily align elements at 100 percent scale. Imagine if an American football field were marked off in inches instead of yards!

The solution is to create a larger interval consisting of multiple pixels which will form the base unit of our grid. I like to use 10 pixels, primarily because doing math with 10 is very clean and intuitive. Additionally, holding Shift + Arrow Key to move objects in Fireworks and Photoshop will move the object in increments of 10 pixels, which is perfect for quickly moving things around whilst keeping them aligned to the grid. Those who are familiar with the metric system will likely feel comfortable using 10 as their base increment. Designers who are familiar with print standards may find nine or 12 more intuitive, as these numbers go nicely into 72, which is the number of points in one inch on the pica scale.

If you plan to integrate your design with an existing CSS framework, it goes without saying that you should check into the default dimensions of their grid before doing anything else. Some of those frameworks even come with design templates that you can just pop open and voila, your grid is already set up and ready for design.

You could potentially use a larger number as well, but it should be small enough so that you’re not constantly placing elements between gridlines to achieve the level of precision you’re after. This is one of my bigger gripes with the prefab frameworks, as their base unit is sometimes quite rough, for example Blueprint’s is 30 pixels. Remember that the number you choose is not extremely important. What is crucial is that you use it consistently within and across projects so that it becomes second nature.

Creating your file and setting up the baseline grid Link

Edit grid in Fireworks
Fireworks has an intuitive panel which allows you to control the properties of grid and guides from one place. You can even edit colors, which is handy if your grid or guides blend in with your design too much.

Resize command for Firefox's Web Developer Toolbar
If you want to test your design in varying screen resolutions, Firefox’s Web Developer Toolbar11 add-on has an ingenious Resize command which allows you to resize your browser viewport to many common resolutions with the click of a mouse. You can even create and save custom resolutions.

When creating a new file for a Web layout, first consider the width of the canvas. Let me pause for a moment to explicitly tell you that we are creating a fixed-width layout. Going the fixed width route (as opposed to a fluid width that fills the entire browser window) allows designers greater control over the measure, or the number of characters per line in a column. Together with leading (line-height) and font size, maintaining an ideal measure of 55-75 characters per line in your main content region is a key factor in creating a pleasant reading experience.

I try to keep my layouts limited to around 960 pixels wide to accommodate the 1024 x 768 screen resolution, which is still a reasonably common size12. Some designers are pushing the limits and creating pages close to 1,000 pixels wide, but be aware that exceeding 970-980 pixels will likely force a horizontal scrollbar on a 1024 x 768 monitor due to the added width of the vertical scrollbar and the “frame” of the browser in which the site is viewed. That being said, there is not an absolute. A web design blog could probably be 1200 pixels wide or wider, as I don’t know any designers still working on 1024×768 (if you’re out there, I’m sorry, it must be miserable). Design for your audience, but keep in mind that as width increases, font size should increase commensurately to maintain an ideal measure.

To allow ample room to design a tiled background on either side of the content area, I usually make my source file about 1,600 pixels wide.

Once you’ve created the new file, go ahead and set up your grid using the base unit you chose.

  1. Access the Guides and Grids section of the Preferences panel in Fireworks, or the Guides, Grid & Slices section of the Preferences panel in Photoshop.
  2. Change the grid intervals to the base value you chose earlier.
  3. In Photoshop, make sure to change the unit of measurement from inches to pixels as well.
  4. Enable snapping, as this makes aligning elements to gridlines much easier.
  5. I also strongly recommend enabling rulers, as they simplify drawing guides and enable you to quickly get a sense for the dimensions of objects as you are drawing them.

<h3″>Adding columns and gutters

3 Column Web Layouts
Each of these home page designs was created on a three-column grid. Though the width of the columns and gutters varies slightly on each design, the overlay demonstrates the structure that the three column grid can provide.

Now that you have a document with a grid, do something useful with it and create columns and gutters. Columns are the groupings of grid units that create the visual structure of the page. They are not necessarily uniform, but they often are. Consistently aligning your page elements to columns is the main reason to utilize a grid and what will make a great deal of improvement both in the strength of your layouts and the efficiency with which you can code and edit them. Guides are without a doubt the most convenient way to establish the boundaries of columns and gutters.

When creating columns and gutters for your layout, the simplest way to start is by creating three columns of equal width. This is a proven foundation that can accommodate a wide variety of content. In fact, most designs I create fall along a three column layout, with columns about 280-300 pixels wide and gutters anywhere from 30 to 60 pixels. On the home page, your page banner/hero area can span all three columns, and beneath it you have three consistent regions for common home page stuff like news, blog posts, product features, etc. When you merge two columns into one, the proportion of the large column to the remaining small one is not terribly far from the golden ratio, and it works great for a typical side navigation/main content area layout of blog posts or inner content pages.

This is where many critics would stop me and say something like “If I design all my sites with this layout, they’ll all look the same.” To which I reply “Nonsense!” Layout is only one part of a design’s overall aesthetic, and when you can answer layout questions with time-tested proportions that work, you have time to focus on other things like color, texture and typography. As a case in point, take a look at this sample of home page designs I’ve done. Each of these has nearly the same three-column underlying grid, but each communicates a profoundly different message.

While the three-column setup works brilliantly for most projects, you shouldn’t feel limited to this simple foundation, either. Take a look at this diagram13. A 960 pixel layout is broken into columns of varying width and number. Each of the columns and gutters is an exact multiple of 10 pixels wide, and all the columns in one row are of equal width. By combining these columns in varying ways, you can quickly develop complex layouts as well as the tried and true standards. For example, if you wanted a wider content region for a slideshow and a narrower sidebar for descriptive text, you could start with the row which is split into three columns, combine the rightmost two or the leftmost two to form the large column and leave the remaining one as-is. Further down the same page, perhaps you need to outline your product’s four (or five) top features. Done.

The beauty of a system like this is that it takes much of the guesswork out of layout, resulting in a much more consistent and strongly aligned finished product. Feel free to utilize my example framework, or better yet create your own which suits the needs of the project and your design tendencies. The most important thing to keep in mind when creating a grid layout is consistency. Gutters should be the same width throughout the layout, and items of equal hierarchical importance should reside within columns of the same width. For example, if you’re displaying four features of a product and each feature is equally important, then the space that each one occupies on the page should be equal. In a nutshell, this is rational design.

That being said, breaking the grid in one place to communicate something meaningful can add a great deal of emphasis to the “broken” area.

Basecamp Pricing Page
The Basecamp pricing page14 is a brilliant example of this concept. The “Plus” plan is the most popular plan, so to draw attention to it, they’ve made it significantly larger than the other plans, which are all strongly aligned to a four-column grid.

A great way to get inspired to work on more complex grid layouts is to study other grid-based sites. Snap a screenshot of the site, then paste it into your graphic design application. Draw solid rectangles over the different content areas, then delete the screenshot layer. The remaining arrangement of rectangles will give you a great perspective of the grid layout the site is using without being distracted by the content. I like to visit Design By Grid’s showcase15 to check out a sampling of nicely executed grid-based Web layouts.

Coding your finished design comp Link

Grids for structure and strength

When you’re finished with the design comp and go to start coding, first off rejoice because you’ve introduced rationality and consistency to your design. The same principles that strengthen your design will also make it easier to code. Then, begin to write your markup. Don’t insert any <div> tags at this point. Pretend you’re writing your code to be displayed without any CSS. While this may be a foreign concept for some of you, it’s an excellent way to minimize the amount of markup you write and structure it as semantically as possible. I even like to preview my markup in the browser to see how it looks without CSS. Ask yourself “Can I read and navigate this page as it looks now, with no CSS?” If you answer no, you’ve got some work to do tidying things up. It may not look pretty, but it needs to make sense.

Now you can start adding your structural markup. If you’re using a prefab CSS framework, now is the time to bid this article adieu and consult their documentation. Assuming you’re creating your own custom CSS, you’ll generally need a <div> tag per column, though if there is only one element within the column (for example in an image gallery) you could target the “content” element directly to create the grid layout. Assign classes in a manner that makes sense to you, though keep the sanity of future editors in mind. I personally feel that it is most semantic to assign class names that describe the role that the content plays in the document (masthead, nav, feature, aside, footer). In HTML 5, we’ll actually get elements with nice semantic names16, but I digress.

Once you’ve got the markup down, analyze the layout to determine exactly what you’re working with. If you’ve forgotten the widths of the columns and gutters, measure them with the Slice tool. Now all you need to do is select your columns in the CSS and add their appropriate widths and the widths of their adjacent gutters. While there are no hard and fast rules here, consistency and clarity should be your guides. For example, let’s revisit our four product features, each contained in a column 210 pixels wide with a 40 pixel gutter (960 pixels total):

.feature {
   display: block;
   float: left;
   width: 210px;
   margin-right: 40px;
.feature.last {
   margin-right: 0;

Notice how an extra declaration is needed for the last column in the row to remove the right margin representing the gutter. Otherwise, the excess width will push it down to the next line. After you conclude a row of columns, your final consideration is to clear the floats so you can start a new row. I prefer this method17 from Perishable Press.

And that pretty much wraps it up. What you see above is fundamentally the CSS structure that you will use to code out the entire design. All of the width and margin values should be multiples of 10 pixels, resulting in much clearer and easier to understand CSS. If within your site you have multiple uses of the same column arrangement, for example four product features on the home page, and four press releases on the press page, you can simply stack selectors onto the same set of properties to recycle CSS:

.press-release {

The only issue with this is if, for example, the product features used one typographical style and the press releases used another. This is easily solved by putting the structural CSS in one declaration and the typographical styles in another. Some folks even like to put these on two separate style sheets, structure.css and typography.css.

Conclusion Link

Las Vegas City Grid

By approaching grid-based Web design from a holistic perspective that encompasses the entire workflow (design comp, coding, future updates) we’ve created a flexible framework shared between our graphic assets and code files that rationalizes many things about our designs. Our users are wowed by the stability and visual strength inherent in a grid-based design and subconsciously surprised when the site loads a little faster because of cleaner CSS. We’re thrilled because our client just called to offer us a retainer contract, and we know that management of source assets and code to maintain a consistent visual language will be much simpler. End result? Instead of hanging around late adding four more repetitive declarations to a stylesheet, we left early and we’re four pints in at happy hour. All thanks to a series of horizontal and vertical lines, spaced at regular intervals of course. — CB

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13 /wp-content/uploads/grid-web-design/framework.png
  14. 14
  15. 15
  16. 16
  17. 17

↑ Back to top Tweet itShare on Facebook

I am a University of Florida grad from Gainesville, FL specializing in illustrated Web layouts and ExpressionEngine development. I'm the lead designer at Flourish, my very own design studio, and I occasionally do contract work for bigger firms. Follow me on Twitter and Go Gators!

  1. 1

    Absolutely beautiful post! Grids are today an essential part of designing for the web today. Is there any statistics on how many who use the 960 grid system?

    Another thing one might think about is how one column might be used only for mobile browsers and how to incorporate the other columns in other parts of the design.

    Thanks for the great examples and code snippets!

    • 2

      Jad Limcaco

      May 3, 2010 2:08 pm

      Great questions Mikael. Definitely those are some things that we should try to research. I’ll let you know if I find out the answers.

  2. 3

    I really like when someone simplify complex theme and you really did that. Thanks for this great article.

    • 4

      Jad Limcaco

      May 3, 2010 2:11 pm

      I agree, Chris did a wonderful job of simplifying the process.

  3. 5

    Nice article.
    Personally I’ve never used grids in my designs, but it seems I should give them a try…

    • 6

      Jad Limcaco

      May 3, 2010 2:11 pm

      Yes, definitely give it a try. I promise that the results will be good. :D

  4. 7

    Lovely post.

    We love squarespace and it’s our ‘platform of choice’ for our clients – the name seems utterly and beautifully appropriate in this context.

    Thanks for a great read.

  5. 8

    Excellent roundup of grid based web design and a very creative way of laying out this post. Another great post from Design Informer!

  6. 10

    Brilliant article. I have never really stuck to a rigid grid layout like this before, I tend to use the basis but play it by eye as I sometimes feel the browser can play tricks on you with the position of elements that line up in a certain way.

    • 11

      Jad Limcaco

      May 3, 2010 2:13 pm

      Hi Danny, a grid is a good way to go and it can really be the key ingredient that will turn an average design into a great design.

  7. 12

    Using grids as a starting point makes the whole process much easier. The end result is a balanced design. Great article!

    • 13

      Jad Limcaco

      May 3, 2010 2:13 pm

      Yes Paul, that’s exactly what people need to realize. Grids help to balance the design and to align everything perfectly.

  8. 14

    Teodoro Lopez

    April 29, 2010 3:26 pm

    now this is just such a great article! grids has been a big part of my development process. two thumbs up! and I agree, there are blogs going over the 960px width but i believe the 960 is still the most commonly used width size – thats what I use.

    • 15

      Jad Limcaco

      May 3, 2010 2:08 pm

      Hey Teodoro, I completely agree with you about using grids in the development process. It’s so important so your website has a strong visual foundation.

      • 16

        Just beautiful – design and article idea – all together! I enjoyed reading this article, researching minimal design trend now. :)

  9. 17

    Great tutorial and information on grid based design. This is the way things should be done now. Thanks.

    • 18

      Jad Limcaco

      May 3, 2010 2:09 pm

      You’re welcome Alan. Well, it’s not necessarily the way to do things, it’s just a suggestion but you can definitely do what works for you. Some people like to use the 960gs and some the Blueprint Framework.

  10. 19

    Nafi Alkautsar Putrawan

    April 29, 2010 4:36 pm

    I love mathematics, but only for website design :p

    With grid, everything can be done quickly. You can think if your home not build with grid wireframe, maybe your home never completed.

    Tutorial Bookmarked! Thanks.

    • 20

      Jad Limcaco

      May 3, 2010 2:10 pm

      That’s an excellent point. Architects use a grid wireframe and are very exact with their calculations. While you can still build a website without grids, grids are a great base to start a website on.

  11. 21

    Probably the best piece I’ve read about grids.

    Well done.

    Thanks for sharing !

  12. 22

    Great article with a beautiful design. This article’s typography was stellar and so easy to read. I have always been a huge fan of working with grids, but sometimes I get lazy with it once it gets put into html/css. Frameworks seemed so confusing, but I think I might check one out now.

    • 23

      Jad Limcaco

      May 3, 2010 2:16 pm

      Hey Jack, I know what you mean, I’ve never really used 960px for development, just for design. A lot of times, I find myself not needing all of the code that’s in there but I do use the grid to design. I just code my own grid as I find that easier and much more flexible.

  13. 24

    The problem with grids is that they take away the “semantic” part of (x)HTML because you end up using more divs than necessary

    • 25

      Jad Limcaco

      May 3, 2010 2:16 pm

      That can be true Tomaz, and that’s the reason that I usually just code my CSS from scratch instead of using a pre-defined grid.

  14. 26

    its pretty awesome articles, great topic, but as far as i do, i never use grid frameworks, but i do mine, as you mentioned in the code.

    there are loots of advantages using Grid frameworks, but my case its disadvantage. :)



  15. 27

    Really and excellent tutorial on grid and nicely explained. i have no words to write it here.
    Nice work. love it

  16. 28

    Can’t wait to see more articles like this.

  17. 29

    Phil Barnhart

    April 29, 2010 8:42 pm

    On the client-facing side, I find that using a clearly delineated grid – can be used to deter clients who want to “bolt on” functionality during the “scope-creep” (sometimes referred to as “development”) phase of a project. I have take printouts – with the grid overlaid in 10px blocks – and even invited content owners to color in and block out the suggested addition.

    • 30

      Jad Limcaco

      May 3, 2010 2:14 pm

      That’s a unique suggestion Phil. I should try that out.

  18. 31

    Great Post! I’m happy to see a greater shift towards graphic design standards on the web. Let’s all make the web a more enjoyable user experience for our users.

    • 32

      Jad Limcaco

      May 3, 2010 2:24 pm

      Hey Kyle, I completely agree. People have been using grids for ages with print design and it’s about time that more people start to use it with web design as well.

  19. 33

    Awesome post, grids rock :-)

  20. 34

    Excellent article! Well written and very informative. Coming from a coding, rather than a graphic design background I wish I had read this a few years ago as it would have saved me a fair bit of head scratching and staring at the monitor with my chin in my hand.

    • 35

      Jad Limcaco

      May 3, 2010 2:25 pm

      Same with me. This post explains it in such a simple way and the article is just so readable because the typography is excellent. Chris really did an excellent job. :D

  21. 36

    It looks like this article already has enough “Brilliant Article!” and “Awesome Post!” comments, so I’ll get to my reactions:

    1. Great design. Seriously, I read it all the way through. Perhaps notable because…
    2. … this article really doesn’t say anything new. And it’s a lot of words for something “simplified.” Or maybe it’s just a little more “beginner” that I expected, in which case I’m not your target.

    As a side note, W3C Schools browser stats are not meant to represent the entire web (as often mistaken); they’re just from their own log files. Checking one’s own stats might better profile people actually coming to the site.

    • 37

      @ Ted Goas thank you for your feedback. When I wrote this article it did end up getting a bit longer than I originally expected. However, I felt it was the only way to legitimately cover the subject from start to finish. You’re also correct about it not saying anything new, my aim was more to gather what I’ve learned from other articles and personal experience and compile it into a workflow that anyone can use.

      On the final point about the browser stats, you’re totally right about the W3C not being representative of the whole internet. If there’s a better source of publicly available information about screen resolution stats I’d love to know about it, as the stats from my personal site are definitely less representative than those (most popular size 1680 x 1050 if that tells you anything).

      • 38

        Hey man, no worries. I was a great run-through. And I wish a good holistic resource for browser stats and resolution existed. I just often see this W3C Schools page taken out of context.

  22. 39

    Thanks for sharing! Great post.

  23. 40

    Thanks a lot but you never mentioned what your ideal column size (width/gutter) for Photoshop. It seems you only specified for Fireworks. I only have, for column size, points, inches, mm, cm and picas with no pixel option in Photoshop CS4.

  24. 41

    Sweet looking design!

  25. 42

    Jad Limcaco

    May 3, 2010 2:14 pm

    There’s always a first time for everything. :D

  26. 43

    Jad Limcaco

    May 3, 2010 2:15 pm

    Glad you like it Nikola. Yes, 960 is probably the most common grid size out there.

  27. 44

    Jad Limcaco

    May 3, 2010 2:22 pm

    Hi Crystal, I don’t see grids to be constricting at all. It’s something that’s actually very useful once you learn more about it. I suggest reading some articles about it, such as this one.

    Myths & Misconceptions About Grid Systems

  28. 45

    Jad Limcaco

    May 3, 2010 2:23 pm

    Hey Mark, I always use a grid when designing for print or web, it’s just a habit for me now and it always makes my designs look better as everything aligns correctly and it’s not just by guessing. :)

  29. 46

    Jad Limcaco

    May 3, 2010 2:23 pm

    I’m glad you liked the article Sean. Thanks for stopping by again.

    • 47

      Aman L. Anderson

      May 11, 2010 8:03 pm

      Jad this is hot man! Wow, blogazines on Design Informer! Loving it!

  30. 48

    I don’t understand this at all. Can someone call me or something?

  31. 49

    thanks a lot for sharing… :)

  32. 50

    A good refresher.

  33. 51

    Good article, just one point: I find that the idea of a 10px grid is still much too fine. Instead of 960 pixels, that’s still 96 columns to deal with! This isn’t a typography grid as used in traditional media, it’s just grid paper. You’re not going to use all of those increments, it’s too many choices to be helpful.

    I set up my photoshop grids as 40px with 4 subdivisions (that’s still 10px, but with “master” lines every 40px).

    Both Blueprint and 960 have larger increments that are divisible into the total width of your layout. You can configure these when you set up your project, but typically it’s (30+10)x24. That’s 30px column, 10px gutter, times 24. You can always break out of these coarser grids wherever you need to, but it’s a reasonable base to start on.

    Whatever you choose, it’s a good idea to set up a grid that’s divisible in useful ways: 24 grid columns is good because you can break it equally into 2, 3, 4, 6, 8, or more. The math is easier to figure out than with 96 columns.

    As for semantic class names, consider looking at: which will save your html from the grid framework’s unsemantic “span-X” class names that litter your markup. (Wynn Netherland gives a good presentation on CSS meta-frameworks here:


    • 52

      Absolutely agree Andrew – the smaller your grid units the less effective your grid as a whole is going to be.

      It is a decent overview (and beautifully designed), but I think recommending 10px grid units is rather misleading.

      The point of a grid is to aid aligning elements but in this case having 96 possible places for an element to go won’t do anything of the sort.

  34. 53

    Excellent article! I avoid CSS frameworks because CSS is my strongest skill. What I have learned, is that grid type systems rock if you code it yourself.

    Some resources you missed: there Firefox plugin that overlays a grid and on the website, you can download starter image files for Fireworks, Photoshop, Illustrator, etc. The nice thing is that they have the guides already set up.


  35. 54

    Thanks for this informative post! I like all the resources listed. Learned a lot.

  36. 55

    {css}designerGrid is a grid based plugin for jQuery allowing full customization. Worth a look as it can also be displayed in FF when coding CSS allowing precise CSS coding.

  37. 56

    Grids are something for used-to-be-print-web-designers. I can live without those and still create a nicely aligned layout.

  38. 57

    Really a nice idea…. u r always a inspiration for me. Its gr8 to follow u.

    Thanks for the post.

  39. 58

    Nice article but really hard to read because of serif that effects readability.

  40. 59

    Great article on why to use grid based layouts. I totally agree that they give solid spacing and really speed up the development time.

  41. 60

    Very nicely explained article. Clear concept with examples.
    Very good job!

  42. 61

    What font are you using for you h2 tags?


  43. 62

    Lovely page, thanks for sharing your knowledge. :)

    I thought you might be interested in incorporating my ‘scrollbar contents’ script to help people visualize everything on here…

  44. 63

    Matt Hamilton

    May 19, 2010 6:18 am

    Very nice article!

    I’ve always thought about getting into them but found the concept of it a bit overwhelming. In short – thanks for simplifying the process, I have many grid websites open in background tabs as I write this comment!

    Thanks =]

  45. 64

    Two thumbs up! thanks for sharing!

  46. 65

    Hi, I was wondering if you could tell me which font you are using in your header image? I can’t find it anywhere, and would really like to utilize it in my future designs.
    Thank you!

  47. 66

    Great Post!!! I will definitely try to implement the grid style to my upcoming projects.

  48. 67

    never thought I’d be using math as I begin a design, but here I am… I’m not a designer by trade (your enemy the PM and dev architect). I do design as a default because an awesome finished product is a holistic, team effort. I’ve always said that since I suck at design, I have to follow all the rules. so, thanks for a really great rule (literally).


  49. 68

    Great TuT!
    nice example and use of Grid layouts, but I was curious to know how do you start coding without starting with divs

  50. 69

    A little beside the point, but “Stadttheater” actually means city theater, not state theater. Stadt=City.

  51. 70

    Danijel Grabovac

    December 12, 2010 8:49 pm

    Great Article! Just one thing: Stadttheater actually means “City Theatre” not “State Theatre” :)

  52. 71

    great and basic info about 960 g system, also please prepare a new article about other grid framewokrs

  53. 72

    Thank you for making the complicated, simple. Grids should be used everyday in a technological age like today,

  54. 73

    For all who may want to know 50 reasons to prefer Fireworks for screendesign

  55. 74

    izmir web tasarım

    February 13, 2011 3:11 pm

    Nice. Thanks for info.

  56. 75

    Nice post. The benefits of the grid-based approach seem similar to those of a blog post I recently read on apply a Minimalism approach in designing your website (an expertise I’m striving to obtain).

    Thanks for the tutorial.

  57. 76

    smashingly superb!! finally grasped coding for gridular design!

  58. 77

    Great article! The best begginer article I’ve read about grids. Thanks.

  59. 78

    Excellent post, I really like the way people are using design with grids. It is not only good practice for design even it is good for coding. bootsraps wireframe better know the grid strategy.


↑ Back to top