响应式网格系统
目的
响应式网格系统技能为组织网页内容提供结构化基础。通过使用一致的列、间距和边距体系，该系统确保视觉对齐，维持层级关系，并简化设计在不同屏幕尺寸（移动端、平板、桌面端）之间的过渡。
使用场景
- 设计新网站或应用的结构布局。
- 构建UI工具包或设计系统组件库。
- 组织像仪表盘或数据密集型界面这样的复杂内容。
- 确保跨多个页面的一致垂直节奏和水平对齐。
何时不应使用
- 实验性/粗野主义设计： 当视觉目标是故意打破标准布局惯例以达到艺术效果时。
- 单用途简单页面： 当内容非常少（例如，单个居中的表单）时，完整的网格系统会带来不必要的开销。
- 固定宽度环境： 当输出严格用于非响应式媒体时（尽管网格对对齐仍然有用）。
输入
要建立响应式网格系统，您需要：
- 设备断点： 布局发生变化的屏幕宽度（例如，600px、900px、1200px）。
- 列数： 每个断点处内容的垂直轨道数量（标准：桌面端12列，移动端4列）。
- 间距宽度： 列之间的空间（例如，16px、24px）。
- 外边距： 视口左右边缘的内边距（例如，移动端20px，桌面端5%或固定最大宽度）。
- 内容需求： 组件列表及其相对优先级/大小。
输出
- 网格规格： 每个主要断点的列、间距和边距定义。
- 布局图： 一个可视化或描述性的指南，展示组件在不同尺寸下如何跨列。
- 实现逻辑： 用于实现该系统的CSS（Grid或Flexbox）属性。
工作流
1. 定义断点
选择您的布局需要适应的关键屏幕宽度。 通用比例：
- 移动端： 0 - 599px
- 平板： 600px - 899px
- 桌面端： 900px+（最大宽度容器大约在1200px-1440px）
2. 设置列和间距参数
确定网格的“内部逻辑”。
- 移动端： 4列，16px间距，16px边距。
- 平板： 8列，24px间距，32px边距。
- 桌面端： 12列，24px间距，自动边距（居中容器）。
3. 建立容器行为
决定网格是流体（按视口百分比缩放）、固定（在下一个断点之前保持特定宽度）还是自适应（混合）。推荐： 使用带有固定max-width的流体网格，用clamp()设置大小（例如，max-width: clamp(320px, 90vw, 1440px)），这样容器可以平滑缩放，而不会在断点处跳跃。
4. 将内容映射到网格
使用CSS Grid（grid-template-columns: repeat(12, 1fr) 配合 grid-column: span N）而不是浮动或inline-block技巧，为组件分配特定的跨列数。
示例： 侧边栏在桌面端（12列网格）上可能跨越3列，而主要内容跨越9列。在移动端，两者都跨越所有4列（堆叠）。
对于需要与父网格轨道对齐的嵌套在网格单元格内的组件（例如，卡片内部头部/主体/底部与兄弟卡片对齐），使用subgrid（grid-template-columns: subgrid 或 grid-template-rows: subgrid）而不是重新声明一个新的独立网格。
当组件的内部布局取决于其自身可用空间而非视口时（例如，一个卡片应根据其容器的宽度而不是屏幕重新排列为1列或2列），使用容器查询（在包装器上使用container-type: inline-size，在子元素上使用@container (min-width: …)）而不是媒体查询。
5. 定义堆叠和排序
确定元素在屏幕缩小时如何移动。通常，左侧的元素堆叠在右侧元素之上。对网格间距和边距使用逻辑属性（margin-inline、padding-block），以便系统能正确适应从右到左的布局，而无需单独的覆盖。
决策规则
- 12列规则： 桌面端使用12列网格，因为它可被2、3、4、6整除，提供最大的灵活性。
- 一致性： 在单个断点内使用相同的间距宽度以保持对齐。
- 移动优先： 始终首先设计4列移动端布局，以确保核心内容得到优先处理。
- “安全区”： 确保外边距足够大，防止内容在移动设备上触及屏幕边缘。
- 视口 vs. 容器： 对页面级、视口驱动的布局变化（例如，整体列数）使用媒体查询。当组件必须根据其自身框大小适配而不管视口如何时（例如，相同的卡片组件在侧边栏和全宽部分中的不同重排效果），使用容器查询。
约束条件
- 可访问性： 确保当列缩小时，文本保持可读，点击目标（按钮）保持足够大——WCAG 2.2（2.5.8）设置了24x24px的绝对下限，对于主要操作，推荐44x44px。
- 响应性： 不应有任何元素的固定像素宽度超过移动端视口宽度（避免水平滚动）。
- 层级： 使用网格来强化重要性；更重要的元素通常应跨越更多列或在堆叠中位于更高位置。
常见失败模式
- 间距不一致： 不同列之间使用不同的间距，打破了视觉“线条”。
- 无间距设计： 将内容紧挨在一起，没有呼吸空间（除非是图像有意为之）。
- 过度复杂： 为微小的调整创建过多的断点，导致CSS难以维护。
- 忽略“中间状态”： 仅在320px和1440px测试，但忽略布局在800px或1024px的样子。
验证标准
- 内容与网格的垂直线完美对齐。
- 在任何视口宽度从320px到2560px，都没有出现水平滚动条。
- 断点之间的过渡感觉合理，内容保持可读。
- 间距和边距在整个页面保持一致。
- 系统使用相对单位（%、fr、rem）实现，而不是硬编码的像素列宽。
- 对于布局应依赖于自身框大小的组件，使用了容器查询（而不是视口媒体查询）。
- 点击目标至少满足WCAG 2.2的24x24px最小要求。