primitiv.es/grid

Grid

A grid is a decision made once so that a hundred small decisions do not have to be made later.

Four instruments for dividing space: columns and gaps as real CSS, breakpoints you can test, a baseline overlay, and common page skeletons.

  1. 01ColumnsColumns, gap and margin with live reflow, as CSSYou want a 12-column grid and the CSS to match, not a frameworkIn preparation
  2. 02BreakpointsDefine and test breakpointsNobody remembers why 768 and 1024In preparation
  3. 03BaselineVertical rhythm overlayThings look slightly off and you suspect the line heightsIn preparation
  4. 04LayoutPage skeletons as grid-template-areasYou rebuild the same header, sidebar, content layout every timeIn preparation