Here’s a small tip about designing grids for single column use. If you hit shift command G, you should see an overlay of the grid used on this blog.

At desktop, it’s a 9-column asymmetric grid – which means the columns are different widths. I’m using the columns in this grid to define margins and gutters, not just space to fill with text. The grid is based on the golden ratio, too. Why? Well, the gutters and margins are also different sizes.

The column ‘d2’ is twice the width of the column ‘d5’. The former is being used as a margin, and the latter as a gutter between columns. Also, d1 and d9 are acting as margins, but in Gridset, these are all being defined as columns with gutters set to zero percent.

Reduce the width a little, and you’ll see how the grids shifts to ditch a couple of columns to go to a seven column grid (the ‘t’ grid). Reduce a little further to the ‘m’ grid and you can see that the final grid is using s1 and s3 as the margins.

Just a little under-the-hood explanation of how this blog is constructed.