CSS Grid 生成器

生成的容器

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr))：三列平分可用宽度。1fr 是剩余空间的一份；minmax(0, 1fr) 允许列缩小到内容尺寸以下。
• gap：每个轨道之间的间距。
• 媒体查询切换为 repeat(auto-fit, minmax(220px, 1fr))，即尽量多创建列，每列至少 220px 宽。断点是列数乘以最小宽度（下限 120px），因此小屏幕上网格会换行而不是被挤压。

fr 单位

fr 表示“剩余空间的一份“：扣除固定尺寸的轨道后，剩余空间按 fr 单位总数均分。

grid-template-columns: 200px 1fr 2fr;

在 1000px 的容器中，第一列占 200px，其余 800px 按 1:2 分配，即 267px 和 533px。

auto-fill 与 auto-fit

• auto-fill：元素不足时创建空的占位轨道。
• auto-fit：把空轨道折叠为零，剩余元素拉伸填满整行。

响应式回退使用 auto-fit，这正是卡片网格想要的：行看起来总是满的。

不同宽度的列

生成器输出等宽列。修改结果即可混合尺寸：grid-template-columns: 200px 1fr 2fr; 得到固定侧栏和按 1:2 分配的两个弹性列。命名区域（grid-template-areas）或显式放置（grid-column: 1 / 3）等规则，请在生成的容器之上手动添加。

Grid 与 Flexbox

• Grid：带轨道的显式二维布局。适合具有行与列结构的布局（页面骨架、画廊、仪表盘）。
• Flexbox：沿单一轴的一维对齐。适合元素自然流动的场景（导航栏、按钮行）。

实际布局通常两者结合：页面骨架用 Grid，组件内部用 Flexbox。

常见陷阱

• 忘记给子元素设置 min-width: 0：网格项默认使用内容的最小宽度，这会让 fr 列无法缩到最长单词以下。给子元素设置 min-width: 0 让它们可以收缩。
• 没有 display: grid 就嵌套：网格的子元素不会自动成为网格，除非你显式声明。