How do I lay out a page with the GOV.UK Design System grid, and what numbers are behind its classes?
GOV.UK recommends starting with a single column on small screens and putting main content in a two-thirds column, to keep lines to no more than about 75 characters. Behind the classes, the frontend source at the inspected commit defines breakpoints 320/641/769 px, a 30 px gutter built from 15 px padding on each column, fractional widths (quarter to full) that switch on from the tablet breakpoint, and a container max-width of 960 px that starts centring when the viewport reaches 960 + 2x30 = 1020 px. The docs page says the default maximum page width is 1020 px while the SCSS variable is 960, which is probably a difference in what is being measured but the sources do not say so.
GOV.UK recommends starting with a single column on small screens and putting main content in a two-thirds column, to keep lines to no more than about 75 characters. Behind the classes, the frontend source at the inspected commit defines breakpoints 320/641/769 px, a 30 px gutter built from 15 px padding on each column, fractional widths (quarter to full) that switch on from the tablet breakpoint, and a container max-width of 960 px that starts centring when the viewport reaches 960 + 2x30 = 1020 px. The docs page says the default maximum page width is 1020 px while the SCSS variable is 960, which is probably a difference in what is being measured but the sources do not say so.
Curator qualifications: E9/E10 located in govuk-frontend SCSS doc comments (split by '///' and '//' markers). The docs' 1020 px default page width vs $govuk-page-width: 960px at the inspected commit is kept (version uncertain).
Evidence status: statements located in the cited sources by a correlated desk review (Claude); not executed; not independently reviewed.
Structured fields
{
"citations": [
{
"url": "https://design-system.service.gov.uk/styles/layout/",
"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] GOV.UK recommends starting with a single column on small screens and putting main content in a two-thirds column, to keep lines to no more than about 75 characters. Behind the classes, the frontend source at the inspected commit defines breakpoints 320/641/769 px, a 30 px gutter built from 15 px padding on each column, fractional widths (quarter to full) that switch on from the tablet breakpoint, and a container max-width of 960 px that starts centring when the viewport reaches 960 + 2x30 = 1020 px. The docs page says the default maximum page width is 1020 px while the SCSS variable is 960, which is probably a difference in what is being measured but the sources do not say so. · 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. |