## Background
Starting from the EPIC {T90687} this subtask wants to scale, consolidate and share the existing work that @alexhollender and @KieranMcCann have been leading around a responsive column grid.
## User story
As a designer, I want to align components to a **responsive column grid**, so that I can define how elements move across different viewports. In order to achieve this I need to know how the grid changes across breakpoints T303522, which are those breakpoints, what are the outer margins of this grid, and which gutters are set between columns.
## Impact
Grids are needed for any component with responsive behabior ([[ https://phabricator.wikimedia.org/T284838 | Dialog ]], [[ https://phabricator.wikimedia.org/T297025 | TypeheadSearch ]]...)
**Who needs this?**
- Readers web needs [[ https://phabricator.wikimedia.org/T284838 | Dialog ]]
- Also related to the Page layout
**What does it impact directly?**
- [[ https://phabricator.wikimedia.org/T284838 | Dialog ]]: grids need to size properly
## Design specs
| [[ https://www.figma.com/file/DYK0hkPDC9KTG9ds2RjrUp/Grids-and-Layouts---T90687?node-id=111%3A167 | Figma with grid proposal here ]] |
## Grid proposal
**Desktop Wide**
- 24 grid columns
- 24px gutter
- Margins scale according to the width of the screen
- Max content width 1514px
**Desktop**
- 24 grid columns
- 24px gutter
- 32px margins (to max content width and then they scale)
- Max content width 1514px
**Tablet**
- 8 grid columns
- 24px gutter
- 24px margins
**Mobile**
- 4 grid columns
- 16px gutter
- 16px margins
## Acceptance criteria (or Done)
**Design**
[-] Create responsive Grid for all our breakpoints with the following specifications:
[-] Number of columns
[-] Max content width
[-] Margins
[-] Gutters
[-] Test new Grid in the 3 most common page layouts: panel, no panel, full
[-] Test grid in skins (New Vector, Vector Legacy and Minerva)
[ ] The responsive column grid is available as a [[ https://help.figma.com/hc/en-us/articles/360040450513-Create-Layout-Grids-with-Grids-Columns-and-Rows | layout grid ]] in our Figma library
[ ] The Wikimedia Design Style Guide features a new page detailing the responsive column grid specs and recommendations.
**Code**
[ ] Implement Grid in Codex
**DS Implementation inspirations elsewhere**
- https://designsystem.digital.gov/utilities/layout-grid/