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.