How do I convert a pixel-based column grid into a fluid grid, and what checks catch errors?
Marcotte (A List Apart, 2009-03-03) gives one formula, target / context = result, applied to a 988 px grid of seven 124 px columns and 20 px gutters: 700/988 = 70.85%, 144/988 = 14.575%, and after the container changes the divisor changes too (700/844 = 82.938%). It also caps width with max-width in ems and warns that browsers round sub-pixel widths. Carbon and GOV.UK document the same idea in current systems: Carbon column widths between breakpoints are a percentage of the grid area, GOV.UK widths are percentages from quarters to full. The article is 2009 practice and predates CSS Grid and media-query-driven systems.
Marcotte (A List Apart, 2009-03-03) gives one formula, target / context = result, applied to a 988 px grid of seven 124 px columns and 20 px gutters: 700/988 = 70.85%, 144/988 = 14.575%, and after the container changes the divisor changes too (700/844 = 82.938%). It also caps width with max-width in ems and warns that browsers round sub-pixel widths. Carbon and GOV.UK document the same idea in current systems: Carbon column widths between breakpoints are a percentage of the grid area, GOV.UK widths are percentages from quarters to full. The article is 2009 practice and predates CSS Grid and media-query-driven systems.
Curator qualifications: Curator recomputed 700/988 = 70.8502%, 144/988 = 14.5749%, 700/844 = 82.9384%, matching Marcotte's 70.85%, 14.575% and 82.938%.
Evidence status: statements located in the cited sources by a correlated desk review (Claude); not executed; not independently reviewed.
Structured fields
{
"citations": [
{
"url": "https://alistapart.com/article/fluidgrids/",
"note": "candidate evidence excerpts"
},
{
"url": "https://github.com/alphagov/govuk-frontend/tree/6c365ebaa998bc2a4ea20fe89c583907e38245dd/packages/govuk-frontend/src/govuk",
"note": "candidate evidence excerpts"
}
]
}Evidence claims
- [sourced_fact] Marcotte (A List Apart, 2009-03-03) gives one formula, target / context = result, applied to a 988 px grid of seven 124 px columns and 20 px gutters: 700/988 = 70.85%, 144/988 = 14.575%, and after the container changes the divisor changes too (700/844 = 82.938%). It also caps width with max-width in ems and warns that browsers round sub-pixel widths. Carbon and GOV.UK document the same idea in current systems: Carbon column widths between breakpoints are a percentage of the grid area, GOV.UK widths are percentages from quarters to full. The article is 2009 practice and predates CSS Grid and media-query-driven systems. · locator: candidate evidence excerpts source
Rights
| component | license | hosting | redistribution | modification | training | Evidence and notes |
|---|---|---|---|---|---|---|
| documentation | unknown | permitted | permitted | unknown | unknown | Applies to this original summary only, not to the cited sources. |