I created Gridelicious, a JavaScript clone of the incredibly overpriced Grid Calculator.
I’ve written this very long post about why I built it, most of which will only be interesting to me. (Hey, it’s my blog.) If you have an interest in how my brain works, go for it. But if you’re just going to play with the app and then skip to making comments, please note:
- I have the utmost respect for the people and the methods behind Grid Calculator. I just think your software is ridiculously overpriced.
- If you’re a programmer, please don’t belittle my admitted novice programming ability. Instead, know that I’m always eager to learn and can certainly benefit from your knowledge.
Version History
- v0.5, 5/10/10
- You can now choose between a document grid that is proportional to the page or a square grid. It’s not an exact square grid, but it’s closest to a square grid to fit in the page evenly.
- v0.4, 6/22/09
- Pressing return or enter would clear the fields; added a “return FALSE;” to prevent that from happening
- v0.3, 5/19/09
- Fixed the math that calculates the Row space. Again. It should be right this time.
- v0.2, 5/5/09
- Fixed the math that calculates the Row height
- v0.1, 5/1/09
- Initial Launch

Some Background
While I might tweet a lot about the technical minutiae of web design (much to the chagrin of many friends on Facebook), the truth is, my share of the mortgage is primarily paid by art directing, designing, and typesetting large documents in short timelines. For the benefit of my non-designer friends: we’re not talking Word files, either; custom InDesign documents with tons of linked images, dozens of styles, a few master pages, and my obsessive attention to balancing out particularly strident rag-right paragraphs. And usually the turnaround is about five days, including juggling content coming from four different sources and simultaneously programming a matching “microsite” (a nonsense term I despise).
Therefore, I could not do my job without first creating a solid grid. Grids are the foundation of good design. Even the most avant garde of designs often have an underlying grid.
I thoroughly believe that my design education was sorely lacking in the fundamental study of grids, and I’ve spent the last year or so of my work secretly diving into a self-initiated boot camp. Sure, my bosses thought they got a great document, but they had no idea I was experimenting with proportions and creating baseline grid for maintaining vertical rhythm.
Grid Calculator
It was with some excitement that I saw the headline “Grid Calculator by Designers Bookshop.” Would this time-saving tool simplify my life? Around lunchtime, I nuked a Healthy Choice Mediterranean Pasta and watched the demo video of this (I hoped) revolutionary product. Sadly, it doesn’t do much of anything.

It has some definite pros. It does a lot of floating-point math for you. Also, the idea of basing your grid on the height of a lowercase “f” instead of the cap-height, which I had been doing, proved interesting.
But that’s where anything time-saving features end. There are no provisions for monkeying with the proportion of your text area, nor—perhaps most distressing—does it actually do any work within InDesign or Quark. You’re still left copying and pasting numbers back and forth between the calculator and your design app to create the grid. Oh, and incidentally, with the exchange rate as of this writing, this application costs $57.02. Let’s face it: Grid Calculator is nothing more than a simple spreadsheet.
That’s when the bug flew in my ass. After reading The Cult of Done Manifesto and watching Ze Frank rant about brain crack, I’ve committed myself to acting on as many reasonable impulses as possible. I set about to prove that Grid Calculator could be produced in an hour using a simple spreadsheet application.
Prototype One: The Spreadsheet
First order of business—did someone beat me to it? Perhaps not; Google produced nothing for me. The first comment from the blog at which I read about this product suggests that a free spreadsheet alternative is forthcoming, but I think the commenter was simply making the suggestion. So I fired up Numbers (not nearly as powerful as Excel but a hell of a lot prettier) and got started.
My spreadsheet skills are pretty good, I won’t lie, and I got pretty far within an hour. In fact, I had in front of me pretty much an exact feature-for-feature duplicate. It looked different, and it didn’t have every feature (more on that below), but I could follow along with the demo video and achieve the exact same results. I had achieved my goal. (Also of note: I didn’t save the file, otherwise I’d share it with you. That was stupid, wasn’t it?)
I would have stopped there, but I wanted to add another feature. Grid Calculator, a European product, seemingly only works in millimeters. I successfully added conversion ratios to allow the spreadsheet to work in inches, millimeters or pica. That’s when I ran into a snag. Pica measurements are typically written as “22p3,” or 22 picas and 3 points. I’m sure Numbers or Excel is capable of creating a formula to parse the “22″ out of that, multiply it by 12 (1 pica = 12 points), then add the “3″ to make 267.
A Simple Web App is Born
And that’s when the next bug flew in my ass—maybe I don’t know how to parse “27p3″ in Numbers or Excel, but I know exactly how to do it in JavaScript. And wouldn’t a link be easier to share and distribute? And wouldn’t it be easier to extend something written as a web application? I had already reverse engineered the math, so how hard could it be?
And so, with the formulas and a lightweight open source CSS library in hand, I committed my second hour to his project. Thus: Gridelicious.
I assure you that you can follow along with Designers Bookshop’s video demo and get the exact same results—just fill in the red boxes. Also, unlike Grid Calculator, you can work in inches, picas (including 0p0 notation), millimeters, and points.
Caveats
It doesn’t have every feature of Grid Calculator: I left out the quick conversion, though I can easily drop that in. I also left out the proportion feature and the top margin features because I’m not exactly sure what they do; they aren’t demonstrated in the video, and there is no downloadable demo of the application that I can toy with. (I’ll be happy to add those features if someone can explain to me what they do.) Also, Grid Calculator lets you save grid settings, but if you made a grid you like, wouldn’t you just save the InDesign file?
Also, if anyone views the source on this, you’ll see my shortcomings as a programmer. I’m sure if John Resig took one look at my .js file, he would feel shame for what has become of his creation.
In fairness…
According to the Grid Calculator webpage, a Pro edition of the software is on its way which will not only do the calculations but also build the grid for you. That, to me, is worth $57 or more, especially if it was built as an InDesign plug-in so I can watch how adjustments to the settings affect the layout. An application like that, indeed, would save me a lot of time, and I would gladly buy it
Also worth noting: the math used by Grid Calculator is based on a method developed by a designer named Marcus Gärde. His book looks to be very informative and classy. I would certainly like to get my hands on a copy. It’s also worth noting that I found this page detailing the math after building my app, but I’m glad it worked out that way. By reverse engineering Grid Calculator, I actually have more appreciation for it and the methods behind it.
However, there is really no sense in spending $57 on an application that does so little. I spent more time writing this blog post than I did building the app. ‘Nuff said.
I look forward to your feedback, and I will post changes at this here post.
(Incidentally, you have Mrs. Guthrie to thank for the name “Gridelicious.” It was one of dozens of names we threw out this afternoon as I drove her to the airport.)