## Background
We have been working on different grid proposals and now we need to test all options (grid columns, margins and gutters) with a [[ https://di-collapsible-menus.web.app/Brown_bear | prototype like this one ]] so that we can choose the best grid proposal to move forward.
## Grids proposal in Figma
| [[ https://www.figma.com/file/DYK0hkPDC9KTG9ds2RjrUp/Grids-and-Layouts---T90687?node-id=1020%3A44437 | Here you can check the grids proposal ]] |
## Acceptance criteria (or Done)
Create a prototype with the following options:
[x] Number of columns:
[x] 14 columns
[x] 12 columns
[] Margin and Gutter:
[x] 40px margins and 40px gutter (they change on the different breakpoints)
[] **32px margin** and 24px gutter (they change on the different breakpoints)
[x] Table of content (on left):
[x] Fixed width (244px)
[x] Not fixed (aligned with the grid columns)
[] Use the new breakpoints defined in T303522
[] `desktop-wide` from 1680px screens and more
[] `desktop` from 1120px to 1679px screens
[] `tablet` from 640px to 1119px screens
[] `mobile` from 320px to 639px screens
## Prototype
https://dsg-grid.web.app/Janis_Joplin