Calculate column widths, span sizes, and readable text columns from container width, column count, gutters, margins, font size, and CPL.

Equal columns within a CSS layout width. Blank gutters and edge margins mean zero; width excludes borders and other padding.

Column Width Formula

For equal grid columns, subtract edge margins and all inter-column gutters before dividing. Text mode estimates a target width from font size, target characters per line and an assumed average glyph width; it does not guarantee readability or exact CPL.

CW = (W - ML - MR - (C - 1) × G) / C

Variables:

  • CW is the Column Width
  • W is the modeled container width; ML and MR are edge allowances, and G is the inter-column gutter
  • C is the positive whole number of equal columns

With zero margins and gutters, CW = W/C. Otherwise use the full formula above. CSS conversions use 1 in = 96 px = 2.54 cm = 25.4 mm; this is a reference-unit relationship, not a promise of physical screen size. CSS ch measures the advance of the zero glyph, not the average character: see W3C Values and Units. Text mode uses width = font size × target CPL × average glyph fraction; its editable 0.5 default is a heuristic. Optional container fit follows the W3C multicolumn model with automatic count: N = max(1, floor((content + G)/(target + G))). A container narrower than the target gives one narrower column and a warning. Actual wrapping also depends on text, font, spacing and layout constraints.

How to Calculate Column Width?

The following steps outline how to calculate the Column Width.

  1. First, determine container width, edge allowances and inter-column gutter in compatible CSS units.
  2. Next, determine the total number of columns. 
  3. Next, use CW = (W − ML − MR − (C−1)G)/C; all widths must use the same unit.
  4. Finally, calculate the Column Width.
  5. After inserting the variables and calculating the result, check your answer with the calculator above.

Example Problem : 

Use the following variables as an example problem to test your knowledge.

container width = 100 px; edge margins and gutters = 0

total number of columns = 2

CW = 100/2 = 50 px. With W=1000 px, C=4, ML=MR=20 px and G=20 px, CW=(1000−40−60)/4=225 px.