栅格、间距与容器Grid, spacing & containers

# 栅格、间距与容器 / Grid, spacing & containers

ID: layout
Version: 1.2.1

用容器与间距组织阅读顺序，让同一套内容在手机和桌面自然重排。

Use containers and spacing to preserve reading order as the same content reflows between mobile and desktop.

## Anatomy
- 外层容器控制页面宽度与安全边距。
  The outer container sets content width and safe gutters.
- 内层栅格按内容类型决定列数，卡片内部保持自己的结构。
  The inner grid chooses columns by content type; cards preserve their internal anatomy.
- 相近内容使用小间距，不同主题使用较大区块间距。
  Use tighter spacing for related content and larger gaps between topics.

## Parameters
- layout.maxWidth: 1344px
  本站宽内容容器上限。
  Maximum width for the site's wide content container.
- layout.gutter: ≥ 14px
  窄屏左右最小边距；宽屏由居中容器增加留白。
  Minimum narrow-screen gutters; centered wide containers add outer space.
- layout.breakpoints: 700 / 1050px
  主要重排点；组件也应检查 320px 的长文案。
  Primary reflow boundaries; also test long copy at 320px.
- spacing: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64
  先按语义分组，再从间距阶梯中选择。
  Group by meaning, then select a spacing step.

## Rules
- 采用 CSS 像素与响应式栅格；本站不是按天猫 750px 设计稿直接缩放的 App 页面。
  Use CSS pixels and responsive grids; this web system does not directly scale a 750px Tmall app canvas.
- 新建布局先保证单列阅读顺序，再增加列数。
  Establish a single-column reading order before adding columns.
- 使用 minmax(0, 1fr) 和可换行文案，避免内容撑破容器。
  Use minmax(0, 1fr) and wrapping copy to prevent overflow.
- 分类页标题、简介、资源数量之后直接进入内容，不插入大面积功能区。
  On category pages, follow title, description, and count directly with content.

## States
- 手机 / Mobile: 单列内容；图片与文本可横向组成紧凑卡片，保持 DOM 阅读顺序。
  Single-column content; compact cards may align image and copy horizontally while preserving DOM order.
- 桌面 / Desktop: 资源网格使用多列；首页主推与补充推荐按重要性分配宽度。
  Use multi-column resource grids; give the homepage lead more space than supporting picks.

## Do / Avoid
- Do: 同一容器中的标题、资源网格和底部操作对齐。 / Align headings, resource grids, and bottom actions to one container.
- Avoid: 为了凑满首屏把标题区拉高，或让卡片宽度由最长英文决定。 / Inflate the heading area to fill the viewport, or let the longest English word set card width.

## Code mapping
- src/styles/global.css: 容器与目录栅格 / Containers and directory grid
- src/styles/editorial.css: 响应式首页布局 / Responsive editorial layout

## Dependencies
foundations

## Acceptance
- 320 / 390 / 768 / 1440 px 均无页面横向溢出。
  No page overflow at 320/390/768/1440px.
- 改变列数不会改变阅读顺序或隐藏重要操作。
  Changing columns does not reorder reading or hide important actions.
- 分类页第一张内容卡片在手机首屏可见。
  The first category card is visible in the mobile viewport.

## Implementation example
```
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 700px) {
  .resource-grid { grid-template-columns: minmax(0, 1fr); }
}
```

## Reference
Method reference: https://tmall-design.com/#style/layout/grid
Rules, parameters, examples, and branding in this file are specific to AI UP LAB.