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 Good1, 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

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

Grid-based Design2
Grid-based Design3
Grid-based Design4
Grid-based Design5
Grid-based Design6
Grid-based Design7
Grid-based Design8
Grid-based Design9

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

  • “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.”
    [ Grids are good10 ]
  • “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 Layout5211 ].
  • “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.”
    [ Web Style Guide12 ]
  • “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 Shea13 ]
  • “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 Rutter1514 ]
  • “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 Rutter1514 ]
  • “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 Boulton1716 ]
  • “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 Boulton1716 ]. You can also use Phiculator18 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 Boulton2419 ]
  • “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 Miner2120 ]
  • “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 Miner2120 ]
  • 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 Holzschlag22 ]
  • “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 Boulton23 ]
  • “Well designed grid systems can make your designs not only more beautiful and legible, but more usable.”
    [ Mark Boulton2419 ]
  • “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 Boulton282625 ]
  • “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 Boulton282625 ]
  • “One of the most useful ‘tools’ for creating pixel-perfect grid systems for the web is Khoi’s superb idea27 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 Boulton282625 ]
  • “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 Bear3029 ]
  • “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 Bear3029 ]
  • “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 Options31 ]
  • “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 Wagener343332 ]
  • “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 Wagener343332 ]
  • “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 Wagener343332 ]
  • “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 Angeles35 ]
  • “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 Angeles36 ]
  • “Basic Outline for Grid-based Design: Content, Audience, Illustrations / Photography / Icons, Format, Typography.”
    [ Feeling your way around grids5037 ]

Articles about Grid-based Design Approach

  • Columns & Grids38
    Grid-based Design39

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

  • Subtraction: Oh Yeeaahh! – “Grids Are Good”40
    Download the “Grids are Good” presentation (8 MB PDF) created by Khoi Vinh and Mark Boulton. Layers Cake41.
  • Compose to a Vertical Rhythm42
    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 pages43
    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 design44
    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 Design45
    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 comps46
    Grid-based Design47

    “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 Design48
    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 templates49
    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 grids5037
    Grid-based Design51

    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 Layout5211
    Grid-based Design53

    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 Design54
    A look at the layout grid behind the Subtraction’s 7.0 redesign.
  • Adobe Web Tech Curriculum – Page Layout Grids55
    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 Grid56
    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 Saw57
    Grid-based Design58

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

  • Using a Background Image Grid to Lay Out Your Web Site60
    “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?61
    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)62
    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 Grid63
    Grid-based Design64

    “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 ’em65
    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 Design66
    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.


  • Five simple steps to designing grid systems – Preface67
    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 168
    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 269
    Grid-based Design70

    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 371
    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 472
    Grid-based Design73

    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 574
    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 Grids75
    An example on how to create effective grid systems.
  • Grids: Order Out of Chaos76
    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 Flash77
    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

  • Adaptive Grid System based on the Golden Section78
    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 79
    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 Bookmarklet80
    Just a quick note to share my version of Andy Budd’s Layout Grid Bookmarklet81.
  • WPDFD Browser Grid82
    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 PDFs83
    Downloadable and very printable
  • Gridding the 96084
    Grid-based Design85

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

  • Web Page Layout Grid86
    Add this image as a background to the body of your page to help you lay it out.
  • Position is Everything – Vertical Grids87
    A method enabling the vertical positioning of elements across grids/columns
  • CSS Grid Calculator88
    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.
  • TypoGridder89
    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.de90 ]
  • Grid Ruler91
    Grid-based Design92

    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 Builder93
    A simple interface for Grids customization.
  • YUI Grids CSS94
    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 CSS95
    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 Grids96
    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)97
    “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)98
    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 Sites99
    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


  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
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99

↑ 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 performance problems in large companies. Get in touch.

  1. 1

    While grids may be good, I think you are talking about all of the premade css frameworks that implement grids with a complex list of classes that have no meaning. I looked at the Blueprint css grid example page and it had things like <div class=”span-6 prepend-3 last”>. I agree that the html should use meaningful class names (navigation, content, footer, product, etc.) and then implement a visual grid, rather than being locked in to some css framework. Because class names should not describe layout/presentation, otherwise, how are they any better than tables? Just a thought, and I’m wondering if anyone else is using something like YUI, Blueprint, etc. with an opinion on this.

  2. 52

    Great article. Thanks, as usual, for compiling this information for everyone to read.

    It can never be understated how important, whether you agree with the concept or not, it is to know every facet of the web design process. For example, I would never use table based layouts but I sure as hell want to know everything about it just incase I need to help a client with their pre-existing website (a client that doesn’t necessarily want to pay for a full redesign).

    @Steved: Good lord, man. Do yourself a favor and redesign your website, it is seriously (and I am being 100% honest here) the worst looking “designer” website I have ever seen. Really.

    Thanks again for the article!

  3. 103
  4. 154

    Benedikt Roßgardt

    July 18, 2009 7:17 am

    Way too much ressources. Who should read all this stuff?

    But the introduction is pretty interesting.

  5. 205

    Thanks for a great list of articles and tutorials. I went through everyone of them!

  6. 256

    Great Article, for me I think seeing a site that has been structured properly and defines hierarchy well is a sign of a good designer and successful design solution. For those who say grids are lame or not necessary need to go back and relearn their craft. Joseph Muller Brockman is one of the most influencial swiss designer of his time and he used complex grid structures with great success. You can only break rules once you understand them and what they achieve.

    @Steve, I make a point of not bashing anyones work but your comment has opened you up for reactions. It is a really poor example of 1980’s hyperlink heaven with no understanding of how information should be presented

  7. 307

    Ashely Adams : Sticker Printing

    September 14, 2009 9:12 pm

    You know what makes grids such a hot idea? They address a basic desire in humans, viz. to find logic and order in everything that we encounter.

    Well, I’m no Sigmund Freud. But this is something I remember having read somewhere. We always try to size things down to certain rules and norms. That way, we perceive and understand things better. Chaos or any apparent lack of order disturbs us.

    So when it comes to web design, a grid-based approach is more easily perceivable.

  8. 358

    The “Five simple steps to designing grid systems – Part 2″ link is malformed.

  9. 409

    Have you done any other good stuff lately? ,

  10. 460

    Assuming no one has posted since I am reading this article and all subsequent comments, I am #60 :). Sorry, onto my comments.

    Grid layouts and non-grid layouts have thier purpose much like how a .tar file has it’s purpose, you don’t use archive files to hold your everyday files do you? No, you use them in special situations where you need to transfer data, or store large amounts of compressible files. The thing to remember here, is that you need to Evaluate what your client/you need and Act based on that. If you think a Grid layout/framework is what you need, by all means do it. If you need a more free flowing site, then by golly do it.

    @Steve, My goodness sir. I have greated some bad websites in my day but not as pitiful as what you have created there. Have you ever heard of a style sheet, or do you find updating all 10,000 of your inline styles manually fun? The only successful thing you did was make me want to leave (and puke, oops did that slip out…)

    I have put it far more than my two cents…

  11. 511


    I am looking for a table based grid framework. Any links??
    At the moment i am using 960 and blueprint for making websites. But for html newsletters i am still using tables. So a grid-table framework would be awesome.


  12. 562

    The gallery showcases some of the world’s best websites designed with grid-based approach and beautiful web typography.

  13. 613

    Great overview of grid design and compilation of links. Thanks for all of your research and hard work.

    Just a quick FYI that the first link (above) to Mark Boulton’s site may have changed a bit since this was posted. You can get to the tutorial via the link to a main menu, below (which seems to be missing the preface), or via the direct link to the preface, which also follows below.

    The other links in the above post are working.

    By the way, Mark’s tutorial is also a great read and highly recommended.

    Five Simple Steps to Designing Grid Systems:

    Direct link to the preface:

  14. 664

    Correction – first link to Mark Boulton’s site goes to a “Not Found” page but the others in the above post are working. (Sorry ~ only clicked the Preface initially but didn’t try the others.)

  15. 715

    well Done, thanks for sharing

  16. 766

    wow that’s lots of links, would be nice if there was a more in depth description because most of the links sound the same

  17. 817
  18. 868

    For any jQuery developers out there, I have just completed a jQuery Plugin that supports the CSS grid layout system, the plugin is called “{css} designerGrid”, you can view it in action at It’s similar to the background grid image theory but it uses the HTML 5 element to dynamically draw the grid and the specified columns, it provides many overrides even allowing various document sizes to be emulated. I would love to hear if anybody finds this tool useful.

  19. 919

    i saw dream in which i play wd colors in which i fly f.16 …i am spreading colors in sky

    i live in my world

    but my friend say me mad guy why they say?

  20. 970

    If you’re looking for a simple, fluid grid system, please check out Flurid —

    Sorry for the spam, just trying to get it out there: )

  21. 1021

    Mispelling in section titled: “Things You Probably Don’t Know About Grid-based Design”

    First paragraph reads: The grid is the most vivid manifestation of the will to order in graphic design. […] Units are the basic buildung block of a grid.

    basic buildung block of a grid ( I think you mean: basic building block of a grid)

  22. 1123

    The Flurid project has been moved, just thought I would post the new location here:

    And remember, you can always find the project on gitHub:

  23. 1174

    Grid is really good.

  24. 1225

    Mark Boulton :
    “The Golden Section is a ratio which is evident throughout the universe as the number Phi”
    … are you sure of that? ;-)

  25. 1276

    You forgot, its the first site I check when in need of grid inspiration.

  26. 1327

    i saw dream in which i play with colors in which i fly f.16 …i am spreading colors in sky.

  27. 1378

    Here at Templamatic we encourage designers to use a grid based approach when developing a web design theme. Thank you very much for a great article!

  28. 1429

    Eddie Gomez di Moncasandro

    May 4, 2011 3:32 am

    symen nerren – you have a very cool name…

    is it real?

  29. 1480

    This is fucked up. You need a grid layout at 200,000×1,000,000 to make a map to play around with. So fuck this.
    With Bungie’s grid, where I can make a whole fucking game if I want.
    So that’s what I’ll do.
    I’m going for high resolution screen models, and making my own game for xxP.
    So yeah.

  30. 1531

    Excellent post! I wish i had the writing abilities you had. Anyway, thanks for Iyour challenging work, please maintain it up.

  31. 1582

    how i can make fullbackground templates using grid system, any tutorials please?


↑ Back to top