The grid is a staple of every webpage. Whether you realize it or not, your layout runs on a grid.
Most designers and developers opt towards frontend frameworks that come packaged with a grid system. This is wildly helpful because it saves time manually coding your own.
The downside is adding more files to your page and increasing HTTP requests. That’s why building your own grid sometimes makes sense – but not by hand.
These tools should prove wildly helpful for anyone serious about grid design. They’re all free and they all work right in your browser so all you need is some Internet and a bit of patience.
YUI Grid Builder
YUI is a user interface kit that features a great design style with reusable assets. Their team also released a handy YUI Grid Builder completely separate from the YUI framework.
As of this writing it seems the YUI library has been discontinued, yet the grid builder lives on. It’s hosted for free on GitHub so you can bet this likely won’t ever be taken down.
All you do is enter your max layout content width, total columns, and type of layout design(usually fluid). This also means you’ll want to design for responsivity using proper CSS breakpoints to handle smaller devices.
Overall a great tool that even offers a cool preview to help visualize your grid in action.
Responsive Grid Calculator
This Responsive Grid Calculator is yet another webapp for generating your grid’s design.
I find this one a bit more complex to learn, but the interface is also somewhat “cleaner” in how you copy/paste your codes.
Just select the total number of columns and your margin percentage size. The calculator outputs all your raw HTML/CSS code using percentages so you can forever use this as a fluid grid layout. Pretty cool right?
Responsify
For the true visual designers out there you’ll adore Responsify.
It’s again entirely free to use and works right in your browser. However this tool is perfect for generating a grid without just looking at numbers and percents.
As you update the columns and gutters you can see the changes in real time on the page.
Don’t like your new changes? Roll it back until you find exactly what you’re looking for.
CSS Grid Template Builder
CodePen is full of glamorous snippets and neat little webapps that are truly superb. Most of that stuff you won’t find anywhere else online.
This cool template builder created by Anthony Dugois is a beautiful example of creativity in action. The whole thing runs in JavaScript but it’s not really meant for geeking out to JS code.
This is a fully-functioning grid generator with auto-updating visuals on the page.
If you’re gonna use this webapp be sure to save the fullview version. This gives you more room to work and arrange a grid to suit your needs.
GridCalculator.dk
Easy of use and simplified inputs best describe the GridCalculator.dk webapp.
This tool works much like other calculators where you enter the data for your grid and get a live preview of the final result. But this calculator has one thing that others don’t: exportable grids.
You can save your grid as a PNG file, or export the design for Photoshop & Illustrator. This tool is best used by designers who want to create mockups using grids, but don’t want to recreate new grids every time.
Gridlover
Cloud-based IDEs are quickly becoming the new norm for frontend coding. They’re handy for testing ideas and quickly bootstrapping new layouts from any computer.
Gridlover is one such example of a webapp that lets you write code directly from your browser.
But this one focuses primarily on grid design for typography and page layouts. By default it auto-fills text into the HTML and gives you a template for the CSS.
You can edit this to suit your needs and to support pretty much anything. The visual gridlines also make it super easy to plan your typography for maximum readability.
Grid by Example
Whether you’re an experienced developer or a novice just getting started, Grid by Example is a super handy resource to save.
It’s kind of like an online library of grid styles that you can study, clone, and repurpose for whatever you need. The whole thing feels incredibly simple to browse through, and the live previews are fantastic.
All of the demos are hosted on CodePen, so you have full access to the raw HTML/CSS code.
Take a look at their design patterns for grid ideas to use in future web projects.
Zurb CSS Grid Builder
Zurb’s playground offers quite a few nifty tools from animation editors to custom newsletter templates. One of my favorite tools is the grid builder with automated code output.
You get to see a live preview of the grid right from your browser along with highlighted columns for a stronger effect.
It’s the ultimate tool for rapidly prototyping grids from scratch. And these grids can even tie into the Foundation framework if you’re planning to build a site with Zurb’s frontend library.
Gridley
Super simple and pretty straightforward, Gridley couldn’t be any more minimalist if it tried.
With just a single page and a few input fields you can quickly generate grid codes for your layout. The final output CSS appears on a new page which I find a tad annoying. But the final code is clean which is always a plus.
There’s even a help page for getting started with this framework and learning the ropes from scratch.
CSS Grid Demo – New Terminology
Lastly I want to wrap with a beautiful grid demo hosted on CodePen. This shows just how much you can do with a pure CSS grid and some knowledge of frontend languages.
This isn’t a web app or something that can generate custom grids. But it does work as a resource for studying CSS grids and learning to apply these techniques into your work.
Check out the full view to see the whole page and feel free to fork this pen to play with your own custom grid ideas.
This post may contain affiliate links. See our disclosure about affiliate links here.
