Skip directly to content

The grid system in Drupal Gardens themes

on November 14th, 2010 at 11:04:56 PM

Grid systems are a popular framework for information organization. Essentially, a grid is a set of vertical columns that span the width of a page. Content is laid out within one or across several columns.

Visualizing the grid

As an example, if we view this site with an overlay that exposes the grid, we see 8 columns devoted to the main content and 2 columns for each of the sidebars.

In the example above, the white vertical lines are the gutters. Gutters separate the columns. In the well-known 960.gs system, for the 12 column grid each column is 60 pixels wide with 10 pixels of gutter between the columns. So (12 columns x 60 pixels) + (11 gutters x 20 pixels) + (2 half gutters x 10 pixels) = 960 pixels. The half gutters occur because the 960.gs system wraps each column in left and right margin of 10px, so the first column only has a left gutter of 10px and the last column has a right gutter of 10px.  

My site happens to be 1024 pixels wide, so the column sizes are a little different.

In the example above, my column width turns out to be 74.5 pixels. A half pixel is fine because in this case the total width of the grid adds up to 1024 pixels. So (12 columns x 74.5 pixels) + (13 gutters at 10 pixel) = 1024 pixels.

Install the GridFox plugin in Firefox to see the grid overlay that I used in the examples above.

The Drupal Gardens grid

Out of the box, Drupal Gardens themes support up to 3 columns in row, all of equal width.  

1 Column (.col-1)

100%

2 Columns (.col-2)

49%
49%

3 Columns (.col-3)

32%
32%
32%

In the Drupal Gardens themes, the CSS for the grid looks like this.

 .col-1 .col {
  width: 100%;
}

.col-2 .col {
  width: 49%;
}

.col-3 .col {
  width: 32%;
}

.left {
  float: left;
}

.right {
  float: right;
}

.col.right {
  margin-right: 1%;
  padding-right: 1%;
}

.col.left {
  margin-left: 1%;
  padding-left: 1%;
}

.col.right:first-child {
  margin-right: 0;
  padding-right: 0;
}

.col.left:first-child {
  margin-left: 0;
  padding-left: 0;
}

From the examples above, you will notice that all of the columns are equally distributed. This is the default behavior of the Drupal Gardens grid. For instance, if you place a block in the first and second preheader regions, the page will render the regions in a two column grid. If you place blocks in the first, second and third preheader regions, the page will render a three column grid. 

The regions in a theme are declared in a theme's .info file. For this reason, we cannot currently allow the names and number of regions to be changed, so for now, the maximum number of regions you can get across a row, and therefore the maximum number of columns, is three.

You are not limited to equally distributed columns within a row. Each region is classed with a unique class name, so you can change the width of a column within a row. For example, this code would produce a one-third / two-thirds pair of columns in the preheader row.

 .stack-preheader .col-first {
  width: 32%;
}
 .stack-preheader .col-second {
  width: 66%;
}

The purpose of the Drupal Gardens grid system is to be so simple that you don't need to think about it, but also flexible enough that you can alter the presentation to meet your design needs. Also in Drupal Gardens, we don't assume that your site will be 960 pixels wide. We don't assume any page width, really. You can style the .page-width class to any value and the theme will flex to meet this size. This is because the column width are declared in a percentage unit, not a fixed-width unit.

Comparison to 960.gs

The grid system is Drupal Gardens is very similar to the one employed by 960.gs. Where 960.gs uses the scoping class container_12, we use scoping classes like col-3. Where 960.gs uses a grid class like grid_4, we use the generic grid class col. The html structures are completely parallel.  In this way, we could technically introduce support for 960.gs into the themes and offer it as a gridding system option. Such an option would require more overhead for a themer to manage, but the increase in flexibility would be worth the increase in complication.

Gridding in general

If grids interest you, you'll find more information at a site like The Grid System. Check out 960.gs as well for an example of a really solid and versatile grid system.

Also check out Khoi Vinh's musing on grid systems. I hear he has a book coming out soon.

Mark Boulton is another great resource for thoughts on designing with a grid and he also has a book coming out soon.

Post new comment