Stuff & Nonsense product and website design

Layout Love: How a 3+4 compound grid can improve on 12-columns

Compound grids offer exciting and often unconventional layout possibilities. Most importantly, they also encourage us to think differently about the choices we make when we’re designing layouts. If you’re familiar with the grid made ubiquitous by Bootstrap, a 3+4 compound grid is a great place to start learning about compound grids.

First, a quick recap. A compound grid is two or more overlapping or stacked grids of any type—column, modular, symmetrical, and asymmetrical—on one page. They can occupy separate areas or overlap.

Two symmetrical grids
Left: A symmetrical grid with three columns. Right: Another symmetrical even-ratio grid with four columns.

A 3+4 compound is made from overlapping one 3-column and one 4-column grid. Both grids should be the same width and the gutters between their columns identical. It’s the interplay of multiple grids which makes a compound layout more interesting than one grid used in isolation.

Two symmetrical grids
Left: Column pattern created by overlapping two grids. Right: Stacking the two grids.

With two grids in this compound, I might choose to use columns from either one to give a design a different personality. A symmetrical 3-column grid has an editorial feel but retains a certain informality. A symmetrical 4-column grid packs running text into tighter blocks. This gives a design a more serious tone.

Different column widths create different personalities
Left: A more informal feeling comes from using wider columns. Right:A narrower measure demands smaller text which adds to the authoritative feel of these tighter text blocks.

Carefully choosing columns from either of these grids can create interesting layouts. In a 3-column designs, I might devote two columns to my main content and one to supplementary content or an associated article. This hierarchy can be emphasised further by adding a large headline and a standfirst paragraph which span both columns.

Different column widths create different personalities
Left: Two columns devoted to main content and one to supplementary content. Right:The formality of a 4-column design can be softened by an oversized headline.

The formality of a 4-column design can be softened by an oversized headline which again spans the width of my main content. Images placed in the running text also make this design’s column structure more obvious.

But—with so many interesting layout options possible—why are the designs we see based on them so often uninspiring? I think the fault lies not with the grids themselves, but in the unimaginative ways they’re used.

Cliche use of twelve columns
That websites using either three or four columns in a 12-column grid look similar has, in itself, become a cliche.

Overlapping 3-column and 4-column grids to create a compound is one way to start creating interesting layouts. This overlap creates six columns with three different widths and has a rhythmic pattern of 3|1|2|2|1|3. It’s this type of rhythmic pattern which helps shift our thinking away from over-used layout patterns influenced by an even twelve columns.

I might combine column widths together to form a layout structure which has three wider columns of different widths. I can reorder and split them to add variety to my layouts while maintaining connectedness across all the pages in my design.

Compound grid layout permutations
Clockwise from top-left: The 3|1|2|2|1|3 rhythmic pattern of 3+4 compound grid columns. Three wider columns of different widths. Those same columns rearranged. Splitting columns creates an asymmetrical layout.

I can utilise those very narrow columns in several ways, perhaps by offsetting a headline to draw a reader into the page. I might also add a skinny column’s width to that of another column and use it to increase the size of an image. This helps form a tighter connection between my content and the image associated with it.

By widening the measure of my running text to include both the narrow columns in this grid, I can use their widths to inform by how much I should indent this this image and pull quote. This placement connects these elements to my running text without interrupting a reader’s flow.

Narrow column indentation
Left: Using a narrow column to offset a headline and adding a skinny column’s width to another column. Right: A narrow column can also inform the amount of indentation needed for images and pullquotes.

I can also use narrow columns to add precise amounts of whitespace. This unused space can visually separate either two topics or my main content from supplementary information. This can be especially effective when that supplementary information includes a very different set of elements.

Precise amounts of whitespace
Precise amounts of whitespace to separate areas of content.

Techniques like this are just as applicable to a transactional website as they are for editorial. In this e-commerce page, I placed the main content and image into wider columns. The narrower supplementary content is separated by one column of whitespace to emphasise the hierarchy of content on the page. A large image connects the two content areas. This technique can also add energy to a product’s promotional pages. The main content and can lead to any number of potential creative layouts.

Hierarchy of an e-commerce page
Left: Layout emphasises the hierarchy of an e-commerce page. Right: The same techniques can add energy and interest to a promotional page.

To break the rigid structure often associated with grid-based designs, I might use CSS Shapes to add a more organic feel by flowing my headline text around parts of a large image.

Can the layouts I’ve demonstrated be accomplished using a Bootstrap-style 12-column grid? Yes, they can, because twelve columns are divisible by both three and four.

Accomplished using a Bootstrap-style 12-column grid and 3+4 compound grid
Left: Accomplished using a Bootstrap-style 12-column grid. Right: The same result by starting with a 3+4 compound grid.

But, would starting with twelve columns have forced the break from conventional thinking? Would a 12-column grid have helped me to avoid those all too common layout patterns? No, I don’t think it would. And that’s one reason why a 3+4 compound grid can improve on 12-columns.

Layout Love

Using modern CSS Grid, I developed five sets of reusable layout components to make prototyping and site development work simpler. I call these Layout Love and rather than keeping them to myself, I’m offering them for everyone to use. You can use Layout Love’s HTML and CSS for any personal or commercial design project. Each set is just £2.99 and all five together are £9.99 which could save you many hours or work.

Written by Andy Clarke who tagged this with design

Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

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