# Grids — Full Reference

> Grids are selected based on container size.
> Up to 3 grids can coexist in the same interface, depending on the layout type (1, 2, or 3 panels).

---

## Grid Tokens

| Token    | Screen size | Margin | Gutter | Body            | Columns | Usage |
|----------|-------------|--------|--------|-----------------|---------|-------|
| S-Fluid  | 0–599px     | 16     | 16     | Fluid           | 4       | Side panels, mobile/responsive layout |
| M-Fluid  | 600–839px   | 32     | 16     | Fluid           | 8       | Center panels, tablet layout |
| L-Fluid  | 840–1199px  | 32     | 16     | Fluid           | 12      | Center panels, tablet layout |
| XL-Fluid | 1200+       | 16     | 24     | Fluid           | 12      | Tablet & desktop header |
| XL-Fixed | 1200+       | Fluid  | 16     | Min Width 1040  | 12      | Single panels, desktop layout |

---

## Notes

- All margin and gutter units are in pixels
- **Body Fluid** = content takes all available width minus margins
- **XL-Fixed** has a minimum content width of 1040px — the margin is fluid
- In multi-panel layouts, each panel can use its own grid based on its width

---

## CSS Reference

```css
/* S-Fluid — 0 to 599px */
/* 4 columns, margin 16px, gutter 16px */
@media (max-width: 599px) {
  .grid { padding-inline: 16px; column-gap: 16px; }
}

/* M-Fluid — 600 to 839px */
/* 8 columns, margin 32px, gutter 16px */
@media (min-width: 600px) and (max-width: 839px) {
  .grid { padding-inline: 32px; column-gap: 16px; }
}

/* L-Fluid — 840 to 1199px */
/* 12 columns, margin 32px, gutter 16px */
@media (min-width: 840px) and (max-width: 1199px) {
  .grid { padding-inline: 32px; column-gap: 16px; }
}

/* XL-Fluid — 1200px+ */
/* 12 columns, margin 16px, gutter 24px */
@media (min-width: 1200px) {
  .grid { padding-inline: 16px; column-gap: 24px; }
}

/* XL-Fixed — 1200px+, content with min-width 1040px */
@media (min-width: 1200px) {
  .grid-fixed { min-width: 1040px; column-gap: 16px; margin-inline: auto; }
}
```
