import Grid1Col12 from './images/grid-1col-12.svg';
import Grid6Col24 from './images/grid-6col-24.svg';
import Grid6Col32 from './images/grid-6col-32.svg';
import Grid6Col24Edged from './images/grid-6col-24-edged.svg';
import Grid6Col32Edged from './images/grid-6col-32-edged.svg';
import GridComponentGutter from './images/grid-component-gutter.svg';
import GridComponentGap from './images/grid-component-gap.svg';
import GridComponentOptical from './images/grid-component-optical.svg';

<Meta title="Grid" />

# Grid

- [Grid spacing](#grid-spacing)
- [Grid layout](#grid-layout)

## Grid spacing

### Grid gap

Grid gap is the standard spacing between elements.

<img src={GridComponentGap} alt="" />

<img src={GridComponentOptical} alt="" />

| Grid gap | px | rem | token |
| --- | --- | --- | --- |
| Less than or equal to 600px (37.5rem) | 12 | 0.75 | `--ds-grid-gap` |
| Greater than 600px (37.5rem) | 16 | 1 | `--ds-grid-gap` |

### Grid gutter

Grid gutter is the space between grid columns, 2x the value of the gap.

| Grid gap | px | rem | token |
| --- | --- | --- | --- |
| Less than or equal to 600px (37.5rem) | 24 | 1.5 | `--ds-grid-gutter` |
| Greater than 600px (37.5rem) | 32 | 2 | `--ds-grid-gutter` |

#### Grid gutter (medium screen)

<img src={Grid6Col24} alt="" />

#### Grid gutter (large screen)

<img src={Grid6Col32} alt="" />

#### Component gutters (large screen)

<img src={GridComponentGutter} alt="" />

## Grid layout

### Column grid

Across screen sizes, grid spacing and grid gutters remain fixed to the defined
values. The number of columns is changeable, and column widths are fluid.
The recommended max-width of the grid for the web is 1432px (89.5rem).

| Columns | Breakpoints | Within media query |
| --- | --- | --- |
| 1 | Less than 599px (37.4375rem) | |
| 6 | Greater than or equal to 600px (37.5rem) | `--ds-viewport-min-medium` |
| 12 | Greater than or equal to 960px (60rem) | `--ds-viewport-min-large` |

| CSS | Description |
| --- | --- |
| `ds-layout-grid` | Supports column grid with column gutters |
| `ds-layout-grid--edged` | Supports column grid with column gutters and outside gutters |

#### 1 column with outside gutters (small screen)

<img src={Grid1Col12} alt="" />

#### 6 columns with outside gutters (medium screen)

<img src={Grid6Col24Edged} alt="" />

#### 6 columns with outside gutters (large screen)

<img src={Grid6Col32Edged} alt="" />