#36

Align with a grid

0:00/1:34

Hot Tip #36 is to align with a grid.

Layout grids keep your Landing Page tidy by positioning within constraints.


Grid demo

Material columns-gutters-and-margins - Google's Material Design initiative does a great job of explaining the differences between columns, gutters, and margins.

8pt Grid System - Very good visual breakdown by Elliot Dahl of the benefits an 8pt system give a design. Includes 8px ratio infographics.

CSS Grid Layout Guide - The most powerful layout system available in CSS. A comprehensive breakdown by CSS-Tricks.

1200px - The original grid systems we all used to reference.

960px - The original grid systems we all used to reference.

History of grids - The brief evolution on Wikipedia.