Notes on column ratios
Posted on July 3rd, 2008I 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.
