90 lines
2.2 KiB
Markdown
90 lines
2.2 KiB
Markdown
|
# 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 |
|
|||
|
|
| --- | --- |
|
|||
|
|
| < 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)
|