GridFox - The Grid Layout Firefox Extension
GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.
An alpha release of GridFox 2.0 is also available! Find out what’s new in version 2.
More than just a handy development tool, GridFox also proves to be indispensable with the daily production of a grid-based site. Using GridFox, producers can easily check if their content maintains the grid, or if it needs to be edited. GridFox is the essential tool for creating and maintaining pixel-perfect, grid-based layouts.
How to use GridFox
The plugin is extremely simple to use. Once you have it installed, just right-click on any website and go the the the GridFox menu. From here you can display your current grid, or go to options to customize it to fit your website.
Examples
Want to see GridFox in action? Just check out some of the many sites which use grid-based layouts.
news.yahoo.com
Column type: varied
Column widths: 10,201,12,12,88,12,13,88,12,12,201,13,10,280,10
Line thickness: 1px
Wired.com
Site width: 1000px
# of columns: 10
Line thickness: 10px
NYTimes.com
Site width: 965px
# of columns: 11
Line thickness: 5px
TimesOnline.co.uk
Column type: varied
Column widths: 200,200,200,185,185
Line thickness: 15px
Subtraction.com
Site width: 840px
# of columns: 8
Line thickness: 10px
Puidokas.com
Site width: 900px
# of columns: 9
Row height: 155px
Top offset: -8px
Line thickness: 15px
-
About the author
Eric Puidokas
A web developer living in Marina del Rey, California who specializes in client-side web technologies.
-
Portfolio
GridFox - The Grid Layout Firefox Extension
If you can open it in Firefox, you can put a grid on top of it. It's easy to customize, allowing you to create the exact grid you designed your layout around.