I needed an idea of the pixels used for different column ratios, so I’ve taken the liberty of working out the possible layouts needed. I’ve limited these to 4 columns, and I’ve also listed some extra rounding to the nearest ten/five for neatness.
The pixel ratios are based on a width of 900 pixels.
Full ratio list
| # Columns | Block ratio | Pixel ratio | Rounded | Rounding |
|---|---|---|---|---|
| 2 col | 1:1 | 450:450 | ||
| 3 col | 2:1 | 600:300 | ||
| 1:1:1 | 300:300:300 | |||
| 4 col | 3:1 | 675:225 | ||
| 2:1:1 | 450:225:225 | |||
| 5 col | 4:1 | 720:180 | ||
| 3:2 | 540:360 | |||
| 3:1:1 | 540:180:180 | |||
| 2:2:1 | 360:180:180 | |||
| 6 col | 5:1 | 750:150 | ||
| 4:1:1 | 600:150:150 | |||
| 3:2:1 | 450:300:150 | |||
| 2:2:1:1 | 300:300:150:150 | |||
| 7 col | 6:1 | 771:129 | 770:130 | / tens ±1 |
| 5:2 | 643:257 | 640:260 | / tens ±3 | |
| 5:1:1 | 642:129:129 | 640:130:130 | / tens ±1-2 | |
| 4:3 | 514:386 | 510:390 | / tens ±4-6 | |
| 4:2:1 | 514:257:129 | 510:260:130 | / tens ±1-4 | |
| 4:1:1:1 | 513:129:129:129 | 510:130:130:130 | / tens ±1-3 | |
| 3:3:1 | 386:386:128 | 385:385:130 | / fives ±1-2 | |
| 3:2:2 | 386:257:257 | 390:255:255 | / fives ±2-4 | |
| 3:2:1:1 | 386:257:129:129 | 385:255:130:130 | / fives ±1-2 | |
| 8 col | 7:1 | 788:112 | 790:110 | / tens ±2 |
| 6:1:1 | 676:112:112 | 680:110:110 | / tens ±2-4 | |
| 5:3 | 562:338 | 560:340 | / tens ±2 | |
| 5:2:1 | 563:225:112 | 560:230:110 | / tens, or 565:225:110 / fives | |
| 4:3:1 | 450:338:112 | 450:340:110 | / tens ±2 | |
| 4:2:1:1 | 450:226:112:112 | 450:230:110:110 | / tens ±2-4 | |
| 3:3:2 | 338:338:224 | 340:340:220 | / tens ±2-4 | |
| 3:2:2:1 | 338:225:225:112 | 340:225:225:110 | / fives ±2 | |
| 9 col | 8:1 | 800:100 | ||
| 7:2 | 700:200 | |||
| 7:1:1 | 700:100:100 | |||
| 6:2:1 | 600:200:100 | |||
| 5:4 | 500:400 | |||
| 5:3:1 | 500:300:100 | |||
| 5:2:2 | 500:200:200 | |||
| 5:2:1:1 | 500:200:100:100 | |||
| 4:4:1 | 400:400:100 | |||
| 4:3:2 | 400:300:200 | |||
| 4:3:1:1 | 400:300:100:100 | |||
| 4:2:2:1 | 400:200:200:100 | |||
| 3:3:2:1 | 300:300:200:100 | |||
| 3:2:2:2 | 300:200:200:200 |
List of possible two-column layout ratios
Ordered by #column structure
| # Columns | Block Ratio | Pixel Ratio | Roundings |
|---|---|---|---|
| 3 | 2:1 | 600:300 | |
| 4 | 3:1 | 675:225 | |
| 5 | 4:1 | 720:180 | |
| 5 | 3:2 | 540:360 | |
| 6 | 5:1 | 750:150 | |
| 7 | 6:1 | 771:129 | (770:130 / tens ±1) |
| 7 | 5:2 | 643:257 | (640:260 / tens ±3) |
| 7 | 4:3 | 514:386 | (510:390 / tens ±4-6) |
| 8 | 7:1 | 788:112 | (790:110 / tens ±2) |
| 8 | 5:3 | 562:338 | (560:340 / tens ±2) |
| 9 | 8:1 | 800:100 | |
| 9 | 7:2 | 700:200 | |
| 9 | 5:4 | 500:400 |
Two columns, in order of left column size, with :1 ratios calculated
The normalised value at :1 will give a better idea of how each row lies relative to each other – and as you can see, it is perfectly in order, as expected when ordering by the first column width.
| # columns | Block ratio | Pixel ratio | Rounding |
|---|---|---|---|
| 9 | 8:1 | 800:100 | |
| 8 | 7:1 | 788:112 | (790:110 / tens ±2) |
| 7 | 6:1 | 771:129 | (770:130 / tens ±1) |
| 6 | 5:1 | 750:150 | |
| 5 | 4:1 | 720:180 | |
| 9 | 7:2 (3.5:1) | 700:200 | |
| 4 | 3:1 | 675:225 | |
| 7 | 5:2 (2.5:1) | 643:257 | (640:260 / tens ±3) |
| 3 | 2:1 | 600:300 | |
| 8 | 5:3 (1.67:1) | 562:338 | (560:340 / tens ±2) |
| 5 | 3:2 (1.5:1) | 540:360 | |
| 7 | 4:3 (1.33:1) | 514:386 | (510:390 / tens ±4-6) |
| 9 | 5:4 (1.25:1) | 500:400 |
It’s worth noting that the golden ratio is approximately 1.618:1. This gives it a pixel ratio (using a width of 900) of 556:344. Rounded to the nearest tens, this is 560:340. The 8-column 5:3 ratio is the closest to the golden ratio on the above list.