Hero Image

Canons of page construction

A CSS Grid example

The Van de Graaf canon

The creation of simplistic page layouts is deceptively complex.

Though the grids and margins used to lay out print publications are invisible, you’d immediately notice if they were absent.

Using the Van de Graaf canon, you always end up with a 9×9 grid. Use this to help proportion your inner and outer margins:

Canon constructions

See—“The Secret Law of Page Harmony”.

Page 1
Page 2
CSS Grid a Day

This is the ‘CSS Grid a day’ entry for May 5.

An example of using CSS grid every day, running from May 1–31st, 2019.

About this entry

I remember coming across the Van de Graaf Canon some years ago, from an article entitled “The Secret Law of Page Harmony” on Retinart.

I’m fascinated by the prospect of rich layouts using CSS grids that we more commonly associate with print design.

Granted, using ratios and proportions for physical printed pages doesn’t make sense given the different context, but I wanted to see if it would be possible to use CSS Grid to visualise page construction canons.

Turns out it’s quite possible

Photo by Banter Snaps on Unsplash

← PrevIndexNext →