Grid 网格系统

Grid 同时定义行和列，适合二维布局。容器先声明轨道，再由项目放入网格；fr 分配剩余空间，minmax() 表达最小与最大约束，auto-fit 和 auto-fill 能根据可用空间生成响应式轨道。

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

显式网格和隐式网格是两个概念。没有指定位置的项目会按自动布局算法放置；项目内容的最小尺寸仍可能让轨道溢出，常见修复是 minmax(0, 1fr)，但要先确认是否允许内容被压缩。

实验与练习

创建卡片网格，改变视口宽度并记录列数变化。把 1fr 换成 minmax(0, 1fr)，加入不可断开的长文本，观察最小尺寸如何影响溢出；说明哪种修复保留了内容，哪种只是隐藏问题。

可运行微实验：先测量再改变约束

把示例放入 320px 宽的容器，打开 Computed/Layout 面板记录 content、padding、border、margin、主轴尺寸和网格线。每次只改变一个属性：box-sizing、min-width、flex-basis、grid-template-columns 或定位方式。记录元素自身尺寸、邻居位置和是否溢出，解释是哪条约束改变了结果。

常见错误

• 用 Grid 做只有单轴排列的工具栏，却没有二维需求。
• 把 fr 当成固定比例，忽略内容最小尺寸。
• 混淆 auto-fit 与 auto-fill 的空轨道行为。

继续阅读

下一篇把项目放进指定行列，观察网格定位与自动放置：Grid 项目定位。

练习

1. 用最小输入复现“Grid 网格系统”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案