Post

Still downloading random grids from the net? Why not create your own and fill it with values that work for your project. Set up your body copy properties together with preferred microblock ratios and calculate them into a system. Choose between multiple columns and gutter options to match your styling preferences and export your grid as Sketch or Photoshop file.

1X1
1280px / 1:1 / 5px baseline / 12 columns
1280 12 C Bl 8 1X1
3:2 Ratio / 12px baseline / 9 columns
Artboard
16:9 Ratio / 16px baseline / 6 columns

Because, why you should fit an elephant into the fridge? Nobody needs that. Instead, build a custom-made jungle that will fit your elephant with a breeze. Then spice it up with some other animals of your very taste.

Article

For a detailed view on the process behind Concordia algorithm development, implementation and a topic of grid calculations take a look at detailed project case study. Also, don't be greedy, share this page with your fellow designers.

Grid 2
1:1
Grid 3
16:9
Grid
3:2
Made by
Arsen Batyuchok
Frontend
Nazar Grabovsky
Algorithm Design
Ross Sokolovski
Direction, Design
Next Project
The Prudence Review