Skip to content

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.

Install GridFox v1.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.

Gridfox screen shot

Examples

Want to see GridFox in action? Just check out some of the many sites which use grid-based layouts.

news.yahoo.com

Yahoo! News

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

Wired

Site width: 1000px
# of columns: 10
Line thickness: 10px

NYTimes.com

Nytimes.com grid

Site width: 965px
# of columns: 11
Line thickness: 5px

TimesOnline.co.uk

TimesOnline.co.uk grid

Column type: varied
Column widths: 200,200,200,185,185
Line thickness: 15px

Subtraction.com

Subtraction.com grid

Site width: 840px
# of columns: 8
Line thickness: 10px

Puidokas.com

Puidokas.com grid

Site width: 900px
# of columns: 9
Row height: 155px
Top offset: -8px
Line thickness: 15px