网格与容器：先建立骨架

先理解这个概念

网格提供共享的对齐规则，容器限制内容扩张，沟槽分隔列，外边距提供边界。十二列只是一种方便组合的选择，简单页面完全可以只有两列或一列。网格应该跟随内容，而不是强迫内容填满所有格子。

网格定义可重复的空间约束。列数只是其中一项，容器最大宽度、列间距和内容最小宽度同样重要。十二列不自动意味着专业；当内容需要稳定阅读宽度时，两列结构可能更合适。网格应帮助组件响应空间变化，而不是把它们固定在某张设计稿坐标上。

记住这三个原则

1. 01

   先决定内容区域和最大宽度。

2. 02

   用 Grid 处理二维区域，用 Flex 处理单方向排列。

3. 03

   在小屏取消不必要的列，保留信息顺序。

实际设计时，分三步做

1. STEP 01

   确定内容容器是流式还是有限宽，并为正文、导航与辅助区分别写出最小可用空间。

2. STEP 02

   依据内容关系选择网格：等权集合用均匀列，正文加目录用主次列，比较数据则保留对齐关系。

3. STEP 03

   逐步缩窄容器，观察第一次出现挤压的位置，在那里改变列数或结构；不要只检查几个设备截图。

一个容易理解的例子

布局规则比一组固定坐标更能适应真实内容。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.5rem;
}

适用边界与取舍

自动网格不适合所有顺序敏感内容。若阅读顺序或对比关系很重要，应确认视觉排列与 DOM 顺序一致，避免为了填满空白改变含义。