Design for Developers

Grid System Cheat Sheet

  • Unit

    Units are building blocks of the grid. They are uniform in size.

  • Gutter

    Equal spacing between units.

  • Column

    A combination of a number of units and gutters.

  • Axial Alignment

    Several items aligned along a common axis.

  • 4 columns — symmetrical grid, easiest to implement but can lead to bland, safe design

  • 3 columns — asymmetrical, a little harder to balance but more visually appealing when done well

  • Multi-column — most challenging and hardest to implement but has the ability to create the most engaging grid