Linode VPS Hosting, Starting at $19.95/month!

Get 2GB of Free Space from Dropbox

You are here

Square Grid

No votes yet
Available Releases: 
Saturday, December 11, 2010 - 00:20
GPL v2

The Square Grid theme is a base theme based on the Square Grid CSS framework by Avraham Cornfeld, for use by designers and front-end developers for creation and implementation of original Square Grid-based design.

The Square Grid has some nice advantages over other grids:

  • Its 35-column breakdown of space allows great flexibility in grid selection, including popular favorites 12-column and Golden Ratio.
  • Gutters are defined by the squares, resulting in pleasing whitespace between columns while staying within the grid framework.
  • It uses the full width of the grid; no dead space on the left and right sides of the grid.


Currently in branch 7.x-2.x:

  • 980px-wide grid by default. (Compare with the 940px usable space in the 960 grid.)
  • Responsive design principles. [Under active development in 7.x-2.x-dev branch only]
  • Configurable Theme Options
    • Toggle grid display on or off (useful during design work).
    • Select options for Responsive Design adaptation to screen sizes. [Under active development in 7.x-2.x-dev branch only.]


  • Resolution-based rendering (wider display on larger resolutions, narrower display on smaller resolutions), for more responsive layouts. [Partially implemented. Still to come: support for smaller grids, full-width display on still-smaller browsers, plus support for a whopping 1400px grid. All optional and enabled through Theme Settings.]
  • HTML5 version. This may end up in a different project or just its own branch.
  • Admin-configurable variables. [Now happening in 7.x-2.x-dev, with more to come.]

Installation and Use

Install the theme as normal. It's recommended to use Square Grid as a base theme for your own theme.

Configuration settings can be found in your sub-theme's Theme Settings.

See the readme.txt file for more info and context.


Branch 2.x

This branch is in active development and where all new features are being implemented. Stay with stable releases to avoid breakage of ongoing projects. Each stable release in this branch should not break any existing defaults, but please test before deploying live. (As always, bug reports are appreciated!)

Branch 1.x

This branch is supported for bug-fixes only. This is a basic Drupalification of The Square Grid css framework, which lays out regions using basic floats. This means that content is loaded top-to-bottom, left-to-right, and not in an ideal semantic order. By default, the main content is to the left with the two sidebars conditionally displaying to the right (if there is content in the sidebars). The adept themer can move these regions around or override their placement via CSS.

Development is sponsored by PINGV Creative.

Design Templates

For more information on the Square Grid, and to download design templates, visit