Working with Grid Systems

At DrupalCon Paris Mark Boulton delivered an excellent session on working with grid systems. He gave the following tips:

  • Let the content inform the grid.
  • Compose to a vertical rhythm.
  • Use an odd numbers: three, five, seven, nine.
  • Identify your constraints and use your constraints (e.g. ads).
  • Break the grid on purpose.
  • Embrace legacy -- use it as a constraint.
  • Give legacy fixed elements backgrounds to fit the grid.
  • Grids are an aid, not a guarantee.

Types of Grids

  • Columnar grids: most common and only made up of columns
  • Hierarchical grids: hierarchy before columns
  • Modular grids: columns and rows (very hard on the web)
  • Baseline grid: hard on the Web because CSS calculates line height from the bottom of the letters, not the baseline

Want More Tutorials?

Are you interested in getting even more tutorials sent to your inbox? Sign up for our incredibly popular tips mailing list and get a free tutorial every month. You may even win a coupon for a free e-book (include your whole name if you want to win stuff).

For a limited time we'll even send you a bonus tips sheet The Top Ten Mistakes People Make when Theming Drupal when you sign up for the list.