Stuff & Nonsense product and website design

Layout Love: Get started quickly with a 4+5 compound grid

I’ve said over and over again that a well-chosen grid can do much, much more than align content. The choice of grid can influence how we approach a design, it can change how we think.

Working with CSS Grid has completely changed the way I think about structuring my layouts. In the past, I thought only in terms of structural columns. I might create a layout with two columns, for example one wider column for my main content, and a narrower column for supplementary content.

Clockwise from top-left: Progressively sub-dividing two structural columns to form boxes for my content.

Then, I would sub-divide each area, adding inner columns and rows. It was an approach very similar to how I’d used tables for layout. In fact, all I’d really done was replace table cells with divs. This two-dimensional approach to layout suits most frameworks’ default 12-column grids very well.

That websites with 12 or 16 column grids look so similar has become a cliche. It’s true that Bootstrap-style frameworks have led to countless identical designs, but not because they contain 12 or 16 columns, but because their even-ratios and symmetry has so strongly influenced our approach to layout on the web.

Think of each column as a beat. When you drum the cadence of 12 evenly-sized columns with your fingers, the rhythm is monotonous.

Compound grids encourage a different type of thinking about layouts. A compound grid is two or more grids of any type—column, modular, symmetrical, and asymmetrical—on one page. They can occupy separate areas or overlap. It’s this interplay of two grids which makes a compound layout more interesting than one grid used in isolation.

Tip: I wrote about compound grids in much more detail in my book Art Direction for the Web. Buy the e-book for £12.99.

When using a 4+5 compound of two grids—4-columns and 5-columns—I might use columns from either. A 4-column grid is a simplification of twelve columns and should feel very familiar. The proportions of a 5-column grid might seem foreign as they’re less often seen online.

I might use column widths from the 4-column grid (B) (left) or the 5-column grid (A) (right.)

For simplicity in these diagrams, I colour-coded these grid modules and name their CSS Grid line numbers as “Ax” (for the 5-column grid) and “Bx” (for the 4-column grid.)

Overlapping four and five columns

By overlapping 4-column and 5-column grids, I form a compound grid which comprises eight columns with four different widths. This grid has a rhythmic pattern of 6|1|4|3|3|4|1|6 which is far more interesting that the 12-column rhythm. This rhythm can be expressed using fractional units in CSS Grid:

[class*="grid"] {
grid-template-columns: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr; }

Instead of limiting my thinking to columns, I’ve lately been developing sets of grid modules, each one based on different combinations of widths, but with a relationship between them all because they’re based on the same grid. This can be a fabulous way to become familiar with using a new grid and experimenting with grid modules has completely changed my approach to layout.

Creating sets of grid modules is a fabulous way to become familiar with using any new grid.

For example, using a 4+5 compound grid, I developed modules of two, three, or four columns. Then I add greeked content and placeholder images to demonstrate the possibilities of using them better. The result is a set of twelve connected modules.

Greeked content and placeholder images demonstrate the possibilities of using these compound grid modules.

Developing compound grid modules

I have two approaches to layout development—descendent-based and class-based—and both have advantages. I start by defining the eight columns in this compound grid by applying styles to any element where “grid” is at the beginning of the class value. I also give the grid lines a named value so I can refer to them later:

@media (min-width: 64em) {
[class^="grid"] {
display: grid;
grid-template-columns: [a1] 6fr [a2] 1fr [b2] 4fr [a3] 3fr [b3] 3fr [a4] 4fr [b4] 1fr [a5] 6fr [a6];
grid-column-gap: 2vw;
grid-row-gap: 5vh; }

When using a class-based approach, I refer to those named lines in class values to place elements onto my grid:

<div class="grid">
<div class="a1-b4">…</div>
<div class="a5-a6">…</div>

.a1-b4 {
grid-column: a1 / b4; }

.a5-a6 {
grid-column: a5 / a6; }

When using a descendent-based approach, I give a unique name to the grid container and in this set my names come from capital cities. Then, I place child elements using descendent pseudo-selectors:

<div class="grid-athens">

.grid-athens > :nth-child(1) {
grid-column: a1 / b4; }

.grid-athens > :nth-child(2) {
grid-column: a5 / a6; }
Combinations of reusable layout components on three example pages.

I can use any combination of these modules to create page layouts which have a far more interesting rhythm than is possible from twelve even columns.

For a 4+5 compound grid, I developed these modules into a set of reusable layout components and they have made my recent prototyping and site development work much simpler. I’ve also developed sets for a 3+4 compound grid, 4+6 compound grid, and a set for modular grid layouts. I’ll write more about those next week.

I call my sets of layout modules “Layout Love” and rather than keeping them to myself, I’m offering them for anyone to use. There are four sets available to buy from my new Layout Love page for only £2.99 per set:

4+5 compound grid set
4+5 compound grid set

4+5 compound grid: Contains twelve modules and three full-page templates, all based on a 4+5 compound of four-column and five-column grids. Buy set for £2.99

4+6 compound grid set
4+6 compound grid set

4+6 compound grid: Contains twelve modules and three full-page templates, all based on a 4+6 compound of four-column and six-column grids. Buy set for £2.99

3+4 compound grid set
3+4 compound grid set

3+4 compound grid: Contains twelve modules and three full-page templates, all based on a 3+4 compound of three-column and four-column grids. Buy set for £2.99

Modular grid set
Modular grid set

Modular grids: Contains fifteen modular grid components based on a four-column, five-column, and six-column grids. Buy set for £2.99

You can also buy all four for £9.99. You can use Layout Love for any personal or commercial design project which could save you many hours or work.

Written by Andy Clarke who filed this in css .

Hire me. I’m available for coaching and to work on design projects.