# Layout.

## Base Grid Columns.

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-layout-base-grid-columns-zero` | 4 |
| `--sbb-layout-base-grid-columns-small` | 8 |
| `--sbb-layout-base-grid-columns-large` | 12 |
| `--sbb-layout-base-grid-columns-ultra` | 16 |

## Base Grid Gutter.

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-layout-base-grid-gutter-responsive-zero` | 16px |
| `--sbb-layout-base-grid-gutter-responsive-small` | 24px |
| `--sbb-layout-base-grid-gutter-responsive-large` | 32px |
| `--sbb-layout-base-grid-gutter-responsive-ultra` | 32px |

## Base Grid Offset.

| CSS custom property | Wert / Value |
| --- | --- |
| `--sbb-layout-base-offset-responsive-zero` | 20px |
| `--sbb-layout-base-offset-responsive-small` | 48px |
| `--sbb-layout-base-offset-responsive-large` | 64px |
| `--sbb-layout-base-offset-responsive-ultra` | 120px |

---

Source: https://digital.sbb.ch/de/design-system/lyne/design-tokens/layout/