# Grid

Grid rules for marketing sections, card layouts, and footers. Grids always live **inside** `<Container>`.

## Defaults

| Concern | Standard |
| --- | --- |
| Framework | Tailwind CSS Grid / Flexbox |
| Gap scale | Spacing tokens only (`gap-4`, `gap-6`, `gap-8`, `gap-10` …) — see [spacing.md](./spacing.md) |
| Columns | Mobile-first: 1 → 2 → 3/4 as viewport grows |
| Alignment | Start-aligned in RTL; use logical properties (`ms-`, `me-`, `ps-`, `pe-`) when offsetting |

## Common patterns

### Two-column feature / split

```tsx
<div className="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-16">
  <div>…copy…</div>
  <div>…media…</div>
</div>
```

### Card grid (services / posts)

```tsx
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  {items.map(…)}
</div>
```

### Footer link columns

```tsx
<nav className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-4">
  …
</nav>
```

### Newsletter / CTA split

```tsx
<div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
  …
</div>
```

## Breakpoint guidance

| Viewport | Typical columns |
| --- | --- |
| &lt; 640px (`default`) | 1 |
| `sm` ≥ 640px | 2 for dense cards |
| `md` ≥ 768px | 2–3 |
| `lg` ≥ 1024px | 2–4 marketing grids |
| `xl` ≥ 1280px | Same as `lg`; prefer more whitespace over more columns |

Exact breakpoints: [responsive.md](./responsive.md).

## Gap rules

Prefer these gaps:

| Context | Gap |
| --- | --- |
| Dense UI (forms, chips) | `gap-2` / `gap-3` (8 / 12) |
| Card grids | `gap-6` (24) |
| Section split layouts | `gap-10` / `gap-16` (40 / 64) |
| Footer columns | `gap-x-6 gap-y-10` |

Do not use arbitrary gaps (`gap-[13px]`, `gap-[1.1rem]`).

## Alignment & RTL

- Site is Persian / RTL. Prefer `start` / `end` over `left` / `right`.
- For asymmetric hero layouts, mirror with logical classes (`lg:ms-auto`, not `lg:ml-auto` unless intentional LTR islands).

## Forbidden

- CSS Grid that sets `width` wider than the container without clipping.
- Mixing Bootstrap / custom 12-column frameworks.
- Absolute-positioned “fake grids” for primary content.

## Related

- [layout.md](./layout.md)
- [spacing.md](./spacing.md)
- [cards.md](./cards.md)