Grid Layout Calculator

Column Width is what's left of the canvas once margins and gutters are subtracted, divided evenly across every column. The calculator first removes Margin Width from both sides of Canvas Width to get the usable area, then removes space for every gutter between columns -- Number of Columns minus one gutters total -- before dividing the remainder by Number of Columns. That means Column Width rises with a wider Canvas Width, falls as Margin Width or Gutter Width grows, and also falls as you add more columns to the same canvas, since each extra column both claims a smaller share of the usable width and adds another gutter that eats into it.

Content Width re-derives the total space the grid actually occupies -- all columns plus all gutters -- which should match the usable width the calculator started from, aside from rounding. Half Column Width and 2-Column Span are just Column Width scaled for common layout patterns: sizing an element to half a column, or spanning two columns plus the gutter between them, both frequent needs when placing images or headlines that don't align to a single column boundary. Because gutter space is subtracted once per gutter (not per column), a grid with more columns always has proportionally more of its usable width consumed by gutters rather than content.