Blank Template

Blank Template

The grid is 12 columns with 20px gutters.

The width of a grid column varies depending on the number of gutters used in a row. Eg. 1/3 has different proportions when it's used as 1/3 + 1/3 + 1/3 vs. 1/3 + 2/3s.

Image widths are calculated as:

Gutters = 20px * (number of images - 1)
Single column = (1400px - gutters) ÷ 12
Image width = single column * column span

Eg.
1/3 + 1/3 + 1/3:
Gutters: 20px * 2 = 40px
Single column: (1400px - 40px) ÷ 12 = 113.3px
Image width (1/3): 113.3px * 4 = 453.3px

1/3 + 2/3:
Gutters: 20px * 1 = 20px
Single column: (1400px - 20px) ÷ 12 = 115px
Image width (1/3): 115px * 4 = 460px
Image width (2/3): 115px * 8 = 920px

Round up or down if an image width is not a full pixel, alternating up/down to reach the correct total width. Eg.
1400px - 40px = 1360px
453.3px + 453.3px + 453.3px = 1360px
453px + 454px + 453px = 1360px

For sub-columns (a row inside a row), change 1400px to whatever the width of the parent column is.

1/3
453px

4/12 144px
8/12 289px

Images can be any height.

When exporting images, lock the ratio and set the width to 800px minimum.

Images should be saved as .jpg @ 70% quality.

1/12 115px
11/12 1265px
2/12 230px
10/12 1150px
3/12 345px
9/12 1035px
4/12 460px
8/12 920px
5/12 575px
7/12 805px
5.5/12 621px
6.5/12 759px
6/12 690px
6/12 690px
6.5/12 759px
5.5/12 621px
7/12 805px
5/12 575px
8/12 920px
4/12 460px
9/12 1035px
3/12 345px
10/12 1150px
2/12 230px
11/12 1265px
1/12 115px
12/12 1400px

3 Columns

4/12 453px
4/12 454px
4/12 453px
3/12 340px
6/12 680px
3/12 340px
2/12 227px
2/12 226px
8/12 907px
7/12 793px
1/12 113px
4/12 454px
5/12 567px
3/12 340px
4/12 453px

4 Columns

3/12 335px
3/12 335px
3/12 335px
3/12 335px
2/12 335px
2/12 335px
2/12 335px
6/12 335px

More Columns

3/12 325px
2/12 217px
1/12 108px
1/12 108px
2/12 217px
3/12 325px
2/12 217px
2/12 216px
2/12 217px
2/12 217px
2/12 216px
2/12 217px
1/12 98px
1/12 98px
1/12 98px
1/12 98px
1/12 98px
1/12 98px
1/12 98px
1/12 98px
1/12 98px
1/12 98px
1/12 98px
1/12 98px
View more case studies