Menu Search
Jump to the content X X
Smashing Conf New York

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 New York, dedicated to smart front-end techniques and design patterns.

Designing With Grid-Based Approach


The main idea behind grid-based designs is a solid visual and structural balance of web-sites you can create with them. Sophisticated layout structures offer more flexibility and enhance the visual experience of visitors. In fact, users can easier follow the consistency of the page while developers can update the layout in a well thought-out, consistent way. However, it’s quite hard to find your way through all the theory behind grid systems: it isn’t easy at all. Some important notions and related key facts can help to learn basics and keep essential techniques in mind.

And this is what this article is all about. Inspired by Khoi Vinn’s and Mark Boulton’s presentation Grids are Good, we’ve decided to take a deep look in the articles about grid-based designs. We’ve read through over 50 articles and selected some of the most important and interesting facts web-developers should know about the grid-based approach. Besides, we’ve listed the most useful references, tutorials and tools we found – with precise descriptions of what the articles are about.

Examples of Grid-based design Link

But first few examples of grid-based designs to make clear what the article is about.

Grid-based Design1
Grid-based Design2
Grid-based Design3
Grid-based Design
Grid-based Design4
Grid-based Design5

Things You Probably Don’t Know About Grid-based Design Link

  • “The grid is the most vivid manifestation of the will to order in graphic design. […] Units are the basic buildung block of a grid. They’re all uniform. Columns are the grouping of units that create the visual structure of the page. They are not necessary uniform.”
  • “A grid is a consistent system for placing objects. It works on two levels: At the unit level of cells (e.g. 20×20 pixels) and at the column level (e.g. 4 columns).”
    [ Grid-based Layout436 ].
  • “A balanced and consistently implemented design scheme will increase readers’ confidence in your site. […] Your first step is to establish a basic layout grid. With this graphic “backbone” you can determine how the major blocks of type and illustrations will regularly occur in your pages. [..] To start, gather representative examples of your text, along with some graphics, scans, or other illustrative material, and experiment with various arrangements of the elements on the page. […] Your goal is to establish a consistent, logical screen layout, one that allows you to “plug in” text and graphics without having to stop and rethink your basic design approach on each new page.”
  • “One of the larger problems in working with grids in web pages is that you often can’t do much about vertical proportions. Often your content is dynamic, so the best you can do is approximate. […] So the focus is usually on the horizontal layout, which usually means columns.”
    [ Dave Shea7 ]
  • “On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. [..] The basic unit of vertical space is line height.”
    [ Richard Rutter98 ]
  • “In order that typographic integrity is maintained when text is resized by the user we must use ems for all our vertical measurements, including line-height, padding and margins.”
    [ Richard Rutter98 ]
  • “Designing Grid Systems in Graphic Design, 1. figure out the page size, 2. divide it into a grid, 3. start designing”.
    [ Josef Muller-Brockmann’s “Grid Systems in Graphic Design” ]
  • “Use the canonical grid to adjust the sizes and positions of elements across rows. Short elements are extended to begin and end on grid boundaries, while long elements are allowed to span multiple grid units or are shortened to fit within the standard unit. In this way, the grid is merely being used to help establish consistent alignment relationships. […] For dynamic layouts, identifying the minimum size that can be accomodated by the layout is usually a better solution than trying to recompute the layout for arbitrarily small display sizes.”
    [ Module and Program ]
  • “One of the most effective principles in grid design is called the Rule of Thirds, also known as the golden grid rule. The Rule of Thirds is a technique which is applied by dividing a space into thirds, both vertically and horizontally, creating a grid of rectangles.”
    Mark Boulton
  • “The Golden Section, Golden Ratio, and the grandiose Divine Proportion are all names for the same thing; a ratio of 1.618. Nodding off? Not yet? Good! Bear with me. Here?s the maths: the Golden Ratio is the ratio between two segments so that the ratio between point ac/bc is 1.618.
    — Mark Boulton. You can also use Phiculator10 for your grids.
  • “The Golden Section is a ratio which is evident throughout the universe as the number Phi. You can use this ratio to good effect in design by making sure that elements of your grid conform to this ratio. Using the Golden Section can ensure a natural sense of correct composition, even though it is based in mathematics it will ‘feel’ right.”
    Mark Boulton
  • “Grid Structures: Once you have answered most of the questions regarding the content, format and typography, you should begin sketching out grid structures based on the appropriate page sizes and formats. You should first begin by defining the Type Area. The Type Area is the area where your grid will be contained. It is surrounded on all sides by margins and in some cases running heads and page footers, numbers, marginalia, etc.”
    [ Typographic Grids ]
  • “The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.”
    [ Wilson Miner1211 ]
  • “You can use relative sizes, but it quickly becomes a lot more difficult to maintain as the math becomes more complicated. It’s easy to get 12 out of 18 (just set the line-height to 1.5em), but when you want to adjust the text size but keep the same line-height, the fractions start to get messy”.
    [ Wilson Miner1211 ]
  • Table layouts are great for grid designs. The markup itself reproduces a specific grid, and the tendency is for us to just fill up the boxes with the images, type, and interface elements that make up our design.”
    [ Molly Holzschlag13 ]
  • “Ratios are at the core of any well designed grid system. [..] By using the size of the paper as a guide we can divide using that ratio to begin creating the grid. You can see this through diagrams 1 – 6 that we begin by simply layering division upon division to slowly build up the grid.”
    [ Mark Boulton1917161514 ]
  • “Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”
    [ Mark Boulton1917161514 ]
  • “Gutters are the gaps in between columns. They are there so text, or image, from different columns don’t run into each other. In grid system design sometimes, depending on what theory you read, gutters are seperate to the columns.”
    [ Mark Boulton1917161514 ]
  • “The thing about designing to grids is that in order for the grid to work you must consistently align items on the grid lines.”
    [ Mark Boulton1917161514 ]
  • “One of the most useful ‘tools’ for creating pixel-perfect grid systems for the web is Khoi’s superb idea18 of using a grid as a background-image element on the body tag. To summarise: Using the grid I designed in photoshop, I save it out as a gif and then apply that to the background of the body tag. This provides me, throughout the build of the site, the grid so I can align all the content elements accordingly.”
    [ Mark Boulton1917161514 ]
  • “In your page layout, you’ve probably set margins. These margins often show up as light solid or dashed lines on the screen. These top, bottom, left, and right margins create a box in the middle of your page. Stop there and you have a single unit grid. Further divide the page into uniform parts and you’ve created a multiple unit grid.”
    [ Jacci Howard Bear2120 ]
  • “Grid units are the primary locations on your page where you will place text and images. They determine placement not necessarily size. That is, if you have a graphic image that is larger than your grid unit, it doesn’t mean you can’t use it. ”
    [ Jacci Howard Bear2120 ]
  • “1, 2, and 3 column grids are common. Each can accommodate lots of text, especially long articles. [..] 4 or more columns offer greater flexibility for publications with text, photos, and other graphic elements and a mix of long and short articles. [..] Grids based on an even number of grid columns can suffer from too much symmetry if text and graphics are confined to individual or double grid columns throughout.”
    [ Grids – Flexible Options22 ]
  • “A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media. The structure is there to shape the content into proportions that are pleasing to the eye.”
    [ Anne Van Wagener252423 ]
  • “To add flexibility you can break the grid down into 10 or 12 columns. Half-columns are a good place to anchor mug-shots, refers, and other info.”
    [ Anne Van Wagener252423 ]
  • “You can have more than one grid. Your front page could be based on a five column grid while inside pages with ads on a six column. There is no one right way.”
    [ Anne Van Wagener252423 ]
  • “The grid is the mannequin and the comp is the pattern. [..] Using the grid-based design comps provided me with units of measurement that I could easily turn into divs for the style sheet. I figure out the areas of content in the same way I would work with a wireframe to block out content and graphics. I come up with a naming scheme for these blocks and turn them into CSS elements. Next, I measure out the blocks of content or graphics in the designer’s comp and record measurements for my style sheet.”
    [ Michael Angeles26 ]
  • “You can use the grid like a wireframe (page schematic) by selecting areas of content and blocking them out, labeling them as you go.”
    [ Michael Angeles27 ]
  • “Basic Outline for Grid-based Design: Content, Audience, Illustrations / Photography / Icons, Format, Typography.”
    [ Feeling your way around grids4128 ]

Articles about Grid-based Design Approach Link

  • Columns & Grids29
    Grid-based Design30

    Dave Shea talks about the difficulty of grid systems in web pages and the compromise of columns.

  • Subtraction: Oh Yeeaahh! – “Grids Are Good”31
    Download the “Grids are Good” presentation (8 MB PDF) created by Khoi Vinh and Mark Boulton. Layers Cake32.
  • Compose to a Vertical Rhythm33
    On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained.
  • Design grids for Web pages34
    No one design grid system is appropriate for all Web pages. Your first step is to establish a basic layout grid. With this graphic “backbone” you can determine how the major blocks of type and illustrations will regularly occur in your pages and set the placement and style guidelines for major screen titles, subtitles, and navigation links or buttons.
  • Developing the grid that supports your design35
    Just a few months ago when I created any design, I didn’t practice a grid system. I didn’t know much about it so I thought that I can live without it. Yes it’s true. You can live without a grid system, but should you? Why is the grid important? I will try to answer to all of your questions in this article.
  • Grid-Based Design
    Grid-based Design

    Few basic rules and techniques in grid-based design.

  • Typographic Grids
    Grids, Ratios and Typography. Theories, such as the golden ratio (also known as the golden mean, golden number, golden section, golden proportion, divine proportion and section aurea) arise from natural patterns and they are applied in the visual and creative fields to create “beauty” by way of considered composition. The Golden Section is derived from a naturally occurring number, called Phi (1.618), which has intrigued humanity for thousands of years.
  • The Grid: The Structure of Design36
    Using a grid is one of those basic design principles. Most news designers are working with a grid someone else designed. No matter what you think about it, you need to understand how to use it. And, at some point in your career you will likely be called upon to create a grid for a new section, or to do a re-design for a paper.
  • Cutting and sewing grid-based design: Part 1,working with other people’s comps37
    Grid-based Design38

    “In this article I’m going to discuss the steps I take when measuring and cutting a comp layed over a grid and turning that data into CSS. The point is to demonstrate the steps to site developers who are new to grids.”

  • The Principles of Design39
    We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition.
  • Grid-based design: Designing blog theme templates40
    The previous grid article dealt with how to come up with a CSS strategy when you’re working with another visual designer’s comps. Now I’d like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress….
  • Feeling your way around grids4128
    Grid-based Design42

    Designing grids carefully and thoughtfully, using simple compositional theory, such as the Rule of Thirds or the Golden Section, increases the legibility of your designs. By using a grid a designer shows an understanding of systems within visual communication and a sympathetic knowledge of conventions..

  • Grid-based Layout436
    Grid-based Design44

    A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines.

  • Grid Computing… and Design45
    A look at the layout grid behind the Subtraction’s 7.0 redesign.
  • Adobe Web Tech Curriculum – Page Layout Grids46
    Introduction to Layout Grids. On each page layout grid, you’ll want to decide placements for main content, branding or logo, page title, global and local navigation elements, copyright or contact information, etc.
  • Setting Type on the Web to a Baseline Grid47
    We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid….A List Apart Article by Wilson Miner
  • The Funniest Grid You Ever Saw48
    Grid-based Design49

    An in-depth look at the complicated layout grid behind The Onion50.

  • Using a Background Image Grid to Lay Out Your Web Site51
    “Simply put, you apply the grid to the body of your page as a background image so that it displays behind your site. Thus you can use it to precisely line up your layout.” Article by Christian Watson.
  • Why use a grid?52
    Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform – web, print & real 3d environments.
  • Wikipedia: Grid (page layout)53
    A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axis used to structure content. The grid serves as an armature on which a designer can organize text and images in a rationalist, easy to absorb manner….
  • Thinking Outside the Grid54
    Grid-based Design55

    “There is a new kid on the block, and her name is ‘I’ve never designed with a table in my career.’” An article by Molly E. Holzschlag

  • Grids: Show ’em if you got ’em
    Grids are a topic that’s rarely discussed or disected in the online community, yet is one of the fundamental components of good design. Why is it that many designers have a hard time with the grid?
  • Grid systems in Web Design
    An overview of grid-based techniques. Every design you make should have a clear grid system whether its print or for the web because they help to organise information into a clear easy to follow layout. Here we roundup the best articles and resources on the subject.

Tutorials Link

  • Five simple steps to designing grid systems – Preface56
    In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. The grid is a child of Constructivist art and came into being through the same thought processes that gave rise to that art movement.
  • Five simple steps to designing grid systems – Part 157
    The first part of this Five Simple Steps series is taking some of the points discussed in the preface and putting it to practice.
  • Five simple steps to designing grid systems – Part 258
    Grid-based Design59

    In part one of this Simple Steps series I talked about how to use a simple ratio, that of the paper size you are using, to create a symmetrical grid on which to create your designs. This, the second part in the series, will deal with other ratios and how they can be combined to create more complex grid systems.

  • Five simple steps to designing grid systems – Part 360
    The third installment to this series is going to be a little different. The previous installments have been talking through some of the basics of grid construction using ratios as the primary device.
  • Five simple steps to designing grid systems – Part 461
    Grid-based Design62

    For the purposes of this article, I’m going to be focussing on the theory of creating the grid rather than the implementation. I did mention in the last series that I would cover implementation using CSS, well I’m not going to.

  • Five simple steps to designing grid systems – Part 563
    Flexible vs Fixed. Which one to choose? Why choose one over the other? Well you won’t find the answers to those questions here. What I’m aiming to do with this article is to investigate how the theory of grid design can be applied to a flexible web page.
  • Grids make eyes happy: how to use Grids64
    An example on how to create effective grid systems.
  • Grids: Order Out of Chaos65
    Invisible Structures: When and Why to Use Grids in Page Layout. Many of the pages that you see everyday have a grid. You may not see it but it is there, holding up the design, establishing structure, guiding the page elements.
  • Designing Grid Systems for Flash66
    I’ve decided that I’m going to write a little something up for those people interested in grids. I’m going to walk you through the process of creating a grid for a Flash based site that will work for screen resolutions of 1024×768 and up.
  • How to Create Page Layouts in GoLive CS2
    GoLive CSS-based or table-based layout grids enable you to create designs by freely positioning objects anywhere on the page. You can convert a CSS-based layout grid to a table-based layout grid. You can also convert a table-based layout grid to an HTML table.

Useful Tools for Grid-based Designs Link

  • Adaptive Grid System based on the Golden Section67
    The Columns are defined using em to keep line length consistent and varying text size using javascript to make the web page fill the browser window.
  • Layout Grid Bookmarklet 68
    Inspired by Khoi Vinh’s post about using a background image of a grid for layout, and a subsequent post over at Smiley Cat about the same thing, I decided to knock up a quick Photoshop style Layout Grid Bookmarklet….
  • Grid Overlay Bookmarklet69
    Just a quick note to share my version of Andy Budd’s Layout Grid Bookmarklet70.
  • WPDFD Browser Grid71
    This grid represents the maximum safe sizes for the three main monitor sizes in use today (June 2001). It takes into account such things as browser menubars and scrollbars and assumes that the browser window has been maximised. 640 x 480, 800 x 600, 1024 x 768
  • Free Online Graph Paper / Grid Paper PDFs72
    Downloadable and very printable
  • Gridding the 96073
    Grid-based Design74

    Background image grid + pixel ruler + column divisions for 960px-width layout, all in one mean little package.

  • Web Page Layout Grid75
    Add this image as a background to the body of your page to help you lay it out.
  • Position is Everything – Vertical Grids76
    A method enabling the vertical positioning of elements across grids/columns
  • CSS Grid Calculator77
    Use the CSS Grid Calculator to quickly visualize page layout and draw grids in a variety of ways. It provides accurate visual feedback on how text blocks and page divisions will appear within a browser window, and returns style declarations for divisions and text to copy and paste into style sheets.
  • TypoGridder78
    To get to the heart of it: a baseline grid is added. You initialize the TypoGridder and it automatically gets the lineheight of an element (by default p, but you can choose any jQuery selector). Then it queries a little PHP script which creates a very simple image which is used for tiling. The result is an opaque layer with a tiling baseline grid. [via Praegnanz.de79 ]
  • Grid Ruler80
    Grid-based Design81

    A simple image that can be applied as the background to most block level elements that will help you get an idea what’s going on between browsers and platforms without the need for another application.

  • YUI: CSS Grid Builder82
    A simple interface for Grids customization.
  • YUI Grids CSS
    The foundational YUI Grids CSS file offers three preset page widths, seven core templates, and the ability to nest subdivided regions of one to four columns..
  • How to play with Yahoo Grids CSS83
    Yahoo released their Yahoo! User Interface. One part of which is their webpage templates, the Grids CSS. To follow along you will need to download the YUI library, a working test Drupal install and a text editor of some sort.
  • Page Grids
    Successful web page design often leverages methods rooted in print design by utilizing an underlying grid system. First, establish a grid, or system of grids, that take into account advertising needs, dynamic elements, etc. Next, create templates and code to support designers and developers..
  • Hacking Technique: Yahoo’s Grid System (Part 1)
    “And what Yahoo! UI CSS Grid has to do with us? Well, I tried to integrate Yahoo! Grid into Blogger Beta, and the result was sweet. By injecting some additional CSS code and some div tags into the simplified version of the Beta template, one can rearrange one’s layout without any CSS knowledge. This article will show you how to do that.”
  • Hacking Technique: Yahoo’s Grid System (Part 2)
    In this post, I get into some technical details, and it also serves as a note for myself in finding interesting things about the Yahoo! CSS Grid system. Read on if you curious on how 3, 4, or 5 columns can be achieved.
  • OS3Grid – Grid for Web Sites84
    OS3Grid a JavaScript component allowing you to create and use powerful grids in your web sites.
    As you can see from the Examples OS3Grid is both flexible and powerful, with a rich set of features and an easy to use API for the developer.
  • “Grid Systems in Graphic Design” by Josef Muller-Brockmann
  • “Geometry of Design: Studies in Proportion and Composition” by Kimberly Elam
  • “Grids for the Internet and Other Digital Media” by Veruschka Gotz
  • “Geometry of Design” by Kimberly Elan
  • “The Elements of Typographic Style” by Robert Bringhurst
  • “Making and Breaking the Grid: A Graphic Design Layout Workshop” by Timothy Samara

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
  14. 14 #
  15. 15 #
  16. 16 #
  17. 17 #
  18. 18 #
  19. 19 #
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26 #
  27. 27 #
  28. 28 #
  29. 29
  30. 30
  31. 31 #
  32. 32
  33. 33
  34. 34 #
  35. 35
  36. 36
  37. 37 #
  38. 38 #
  39. 39
  40. 40 #
  41. 41 #
  42. 42 #
  43. 43
  44. 44
  45. 45 #
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52 #
  53. 53
  54. 54
  55. 55
  56. 56 #
  57. 57 #
  58. 58 #
  59. 59 #
  60. 60 #
  61. 61 #
  62. 62 #
  63. 63 #
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83 #
  84. 84
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex UX, front-end and performance problems in large companies. Get in touch.

  1. 1

    Why grid-based? What about semantics?

    • 2

      Because first and foremost, human beings use their eyes to read. Typography and layout are not just “style” they are inherent to how information is understood. Five centuries of printing knowledge stand up for more than a group of “techies” setting the visual parameters for an entire generation.

    • 3

      Grid based layouts can be semantic. See grid960.css or baseline.css. There is no requirement to use crappy HTML tables.

    • 4

      There’s more flexibility in using Word/LibreOffice styles than with structured content like DITA or DocBook. Styles are semantics, but they’re not naively handed over to the user to sort out. The same lesson is in JSON vs XML. JSON won because coders could just plug it in.

  2. 5

    Delicious, great resources for us.

  3. 6

    Keith Donegan

    April 14, 2007 6:38 am

    Great Job Guys, Thanks

  4. 7

    Great list! Finally, a one stop shop for getting started with grid layouts.

  5. 8

    Exelent work again, thank you for looking after us .

  6. 10

    Скакунов Александр

    April 14, 2007 8:16 am

    Not very interesting…

  7. 11

    Thank’s , as always very nice research .

  8. 12

    Very nice list , as always you guys are doing a perfect job :)

  9. 13

    @Igor: grids and semantics aren’t mutually exclusive. Using a grid shouldn’t have any effect on what elements you use to describe the content; all the grid is doing is giving you a construct along which to align those elements.

  10. 14

    Awesome : ) thank you guys so much.

  11. 15

    Truely an amazing list! Didn’t know grids had that much an inpact on webdesign. Thanks for the enlightning!

  12. 16

    mmmmm, grids. Brings me back to my newspaper days.

  13. 17

    excellent stuff. comprehensive and interesting. Why do people post negative comments about articles like this? Its a listed resource that must have taken allot of research. If everyone doesnt learn at least one tiny nugget id be very surprised. All knowledge is important, no matter how small. Get over yourselves!!!

  14. 18

    Thank you so much! I just started to conceptualise layout for new web site of my college, with grid based ideas in mind. This article just made my life so much easier :)

  15. 19

    That quote from Molly is so out of context :P

    For the rest, great as usual.

  16. 20

    Hmm… Being a designer with a good solid background in fine arts, my degree involved aspects of design in multiple media – visual, print, and web.

    Grids are a good thing because they help a composition to come together… BUT, they are meant for print (newspapers, magazines etc…) – and don’t always make for visually interesting websites…

    The way I see it – grids are good for corporate documents and websites. Not all clients want this cold structured feel. The web is it’s own medium – and should be treated as such… It allows us to break from old archaic traditions and bend the rules… web design, to me, is an art form unto itself.

    Without trying to sound smug here, I use grids to layout text in relation to surrounding elements – but as an artist first and foremost – I trust my own sense of composition more than a mathematical equation.

    • 21

      Perhaps you should start painting or another navel-gazing craft activity and leave design to designers. There is enough self-indulgence on the web.

      Fine Art is not design, did you miss the 20th century? Fine art is a sad 19th century cast off left behind by the design pioneers of the last century.

      Communication is what is most important, not your feelings.

      It is all in the word really DESIGN. DE – SIGN. This word means “Without signature”. That means your doing it for somebody else or society not yourself. Why not read Eric Gills book “ART” I think it will help you understand why a shift in career will help all of us.

      As for bending rules. In design? Why not really bend rules and take up law, politics or join the military. Good luck.

      • 22

        Boy Dave. Your reaction to Ron was utterly smug. I thought Ron made some very astute points, which I’m inclined to agree with. It didn’t sound like he was dissing grids, just noting that they’ve seen their time and day, and shouldn’t always apply to the web.

        Good grief, I hate abusive responses like the one just above mine. Talk about a new world…

  17. 23

    Ok, steve, stop bashing grids just because you think you’re all that and a bag of chips. But this article isn’t BS. “Grid-based” layouts have been used in pages since the table tag was added to html very soon after its creation. In fact, why not call them “table-based layouts”. Oh yeah, cuz then everyone would figure out it’s just BS. How about this: in some cases it’s best to use a grid, other cases not so much, sometime a mix is proper.. Every site is different, you know.

    This article reminds me of knuckleheads who either design 100% “flowing layouts” and 100% fixed-width pages. Lame.

  18. 24 guys really don’t leave out a thing.

    Very impressive material over here.

    Always a favorite at my site..

  19. 25

    Captain Obvious to the rescue

    April 15, 2007 5:52 am

    steved, you call that… thing there, linked through your name, a website?

    I call that ugly, and something that has been beaten to death with the ugly stick until there was nothing left of it. Macromedia and HP both have really strict grid-ridden pages. If they weren’t, they’d look and navigate like HELL.

    IF you are to have an opinion, at least have something to build it on, something that can give weight to your arguements. In this case, you fail hard.

  20. 26

    It scares me half to death that people like Steve are teaching design. How in the hell did this happen? The guy is basically an engineer let loose with HTML and photoshop. Egad. I feel bad for SFU and other universities. Goes to show how far being middle class, white, male and over-educated gets you these days. *He* is a design professor?

    (hanging my head and quietly weeping for the industry)

  21. 27


    April 15, 2007 4:25 am

    Even for lame web 2.0 blogs this takes the cake. Those of you that found this article informative might want to check out two other sources. First is a company called Google, which among other things produces a search engine. Google will allow you to reproduce the entire contents of this site by searching for ‘crappy list grid design quotations’. The second is your local newspaper. Find someone in your neighborhood with a job and they will likely have one of these in their front yard most mornings. The entire layout is grid-based, providing you with ready-made example you don’t even have to print out. You’re welcome.

  22. 28

    I have run major SF-based web design companies (with Macromedia and HP as our major clients) and have taught design at university including Stanford and now elsewhere. Grids? You are kidding. Grids are awful. Just look again at the images above at the websites examples, they are mechanical, cluttered and confusing. Please do not fall for a the newest (probably) short lived fad – like grid based design. Design is not about fads. Think experience design – like what is the experience you want the user to have and then design it.


  23. 29

    Uh — Steve who supposedly taught design at Stanford… how can you teach design and not incorporate grids? Classic graphic design, visual heirarchy requires grids. Enough of this wild-west web design where anything goes and text expands across the whole browser width.

    Grids are for more than newsprint. This should be a no-brainer. Steve may have taught at Stanford, and now “elsewhere”. He’s teaching “elsewhere” because he’s not a designer. You can’t be a desinger and not use grids. A great designer uses a grid and knows when to break it.

  24. 30

    To the rescue!

    April 15, 2007 3:59 pm

    Kate, I agree with you. It is perhaps as scary as having Baghdad-Bob in charge of communications.

  25. 31

    Ewww. For a prime example of why we need more real designers on the web and why grids are important, look no further than Steve DiPaola’s “the stanford design teacher” website. Good God.

  26. 32

    I wont judge on whether someone has or not to use grids and what role they play in constructing websites, but the format of this article is almost impossible to read.

    A huge amount of information strangely arranged. I would have made a stand-alone article not a mash-up of 50 others…

  27. 33

    Once again, a great article1 This time about one of my favourite topic. Thank you very much! Greetings from Germany (to Germany) ;)

  28. 34

    I’m just missing some semantics.. but I’ve got to say: A real nice list. Have read for some hours and I think I’m totally in this topic.

    Was really interesting, keep it up :)

  29. 35

    It’s nice to have a bunch of links tied together like this, but I don’t care for the grids personally. Among the example pictures given they are all horrible to look at. I hate sites that go beyond 3 columns and even 3 can be too many. Those pages just have no flow to them. I’m sure grids could be used for a good design, but the examples here are very much lacking.

  30. 36

    What a great page… Thanks alot.

  31. 37

    perhaps if steved had stuck to a grid he wouldnt have what is a horrible site on his hands! (btw our new company site is being rebuilt, will link when fixed). Tables are for form and structure, how a designer interprets the grid shows the strength of your ability and understanding of the brief. A grid could just be a rough from which to deconstruct.

    ie for interestings personal websites, we know who not to ask.

  32. 38

    Best post in a long time!

  33. 39

    Thanks a lot for your great job about this topic from germany/ dresden.
    I take my hat off to you, respect. I like works about a topic with a lacking in content.
    Another side, if you work so hard for us, we lost many hours to read this amazing list with so much great resources.

    Thanks a lot, again.


  34. 40

    marianne mcdougall

    May 24, 2007 11:34 pm

    I have been working as a graphic designer in the packaging division of
    G3 Creative for 6 years and even I learned a bit from the above articles.

    Thank you guys.

  35. 41

    i am agree about grid from education basic and professional ..

  36. 42

    That steved guy cannot be for real! He must be trolling. He is blissfully (or ignorantly) unaware of the fact that grid based design has been around for decades before the web was even conceived. Yet he considers himself to be a designer.

    Ok, if you want to be all artsy-fartsy and discuss creating “user experience” rather than a good design, then the experience I have when viewing your site is one of nausea, confusion and incredulity. If that was your goal…well done!

  37. 43

    Very informative. I’ll try to implement some of the suggested grid technique rules from now on. Cheers!

  38. 44


    People dissing grids, thats like a painter saying he prefers painting on rocks instead of a canvas.

    A grid just helps creativity because “gasp’ websites are a lot like newspapers. Are you here reading this article because you love the background color of one of the ads or did you actually read text?

    Here’s another question, the sites you visit on a daily basis, are you reading material or just basking in the art and graphics. Hell if your not reading then your watching youtube and thats also grid based.

    Grids are just a way of organizing what you wantto convey, they can be as creative or a dull as you permit.

  39. 45

    Great article, lot’s of good info.

    However, Molly Holzschlag is 100% wrong:

    DO NOT, EVER, use tables for layouts, tables are for the display of data only. Its not just about semantics either. Table based layouts have a tendency in some browsers to render slowly, they are a nightmare to maintain, and if you need to ‘tweak’ the layout, you’re in for a headache. Instead, use CSS to layout your designs, whether grid-based or otherwise.

    If you “just can’t” get away from using tables for your layouts, you need to relearn a few things in the web design world.

  40. 46

    However, Molly Holzschlag is 100% wrong

    Please read her article and see the quote in context before you start bashing her.


↑ Back to top