在构建网页时，我们常需要将一组宽度相近的卡片或模块排列成多列，并且希望它们能够根据视口大小自动调整列数、在空间不够时自然换行。CSS Grid 布局提供了一套非常简洁的声明式写法，能够不依赖 JavaScript 和大量媒体查询就完成这件事。
一、核心语法拆解
实现响应式列布局与自动换行，最关键的是 grid-template-columns 属性的取值。我们通常使用如下写法：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}
这里 repeat() 函数用来重复定义列轨道。第一个参数 auto-fill 表示浏览器要根据容器宽度尽可能多地创建列轨道，能放几个就放几个；如果容器变窄，放不下的轨道就会换到下一行。第二个参数 minmax(200px, 1fr) 规定了每一个列轨道的最小宽度为 200px，最大宽度为 1fr（即剩余空间的等分占比）。
这种写法的优势在于：当容器宽度是 650px 时，可以放下 3 个 200px 的列（加间隙），多余空间被 1fr 均分；当宽度缩小到 420px，只能容纳 2 个列，第三个自动折行。整个过程不需要我们手动设置 breakpoints，也不会出现内容溢出。
二、与 Flexbox 方案的对比
很多开发者习惯用 Flexbox 做换行布局，例如给子项设固定 flex-basis 并允许 wrap。但 Flexbox 本质是“一维”布局，换行后每一行的高度和对齐是独立计算的，且难以让最后一行的元素拉伸填满整行。
/* Flexbox 常见写法 */
.flex-box {
display: flex;
flex-wrap: wrap;
}
.flex-box > .item {
flex: 1 1 200px;
}
上面的 Flex 代码虽然也能换行，但 flex: 1 1 200px 只是建议基准值，实际分配受内容影响，而且不同行之间列不对齐。Grid 的 auto-fill 加 minmax 则在二维层面上严格对齐轨道，视觉一致性更好。
从维护成本看，Grid 方案只需改一个 minmax 的数值就能调整响应阈值，而 Flex 往往还要配合媒体查询去改 flex-basis，才能避免极端宽度下出现孤行或过大留白。
三、完整页面示例
下面给出一个可直接运行的 HTML 片段，演示卡片列表在浏览器缩放时的自适应表现。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body { margin: 0; font-family: sans-serif; }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
background: #f0f4ff;
border: 1px solid #ccd;
border-radius: 8px;
padding: 16px;
min-height: 120px;
}
</style>
</head>
<body>
<div class="grid">
<div class="card">卡片一</div>
<div class="card">卡片二</div>
<div class="card">卡片三</div>
<div class="card">卡片四</div>
<div class="card">卡片五</div>
</div>
</body>
</html>
将以上代码保存为 html 文件后用浏览器打开，拖动窗口大小即可看到卡片列数随宽度变化，且始终从最左侧整齐排列。如果希望空余空间不被拉伸而保持左对齐，可以把 minmax(220px, 1fr) 改成 minmax(220px, auto)，此时列宽以内容为主，超出部分留白在右侧。
需要注意的是，auto-fill 和 auto-fit 容易混淆。前者会保留空轨道占位，后者则将空轨道折叠，使现有元素拉伸占满。若容器很宽但子项少，用 auto-fit 能让少量卡片拉宽填满视口，而 auto-fill 会维持原尺寸并靠左。
四、常见误区与处理
一个典型错误是给网格容器设了固定宽度或父级 overflow: hidden 却未设 min-width: 0，导致内部长文本把轨道撑破。Grid 项目默认 min-width 为 auto，会拒绝收缩到比内容窄。此时应在子项加 min-width: 0 或使用 overflow-wrap: break-word。
.card {
min-width: 0;
overflow-wrap: break-word;
}
另外，部分旧版浏览器（如 IE11）不支持 auto-fill 与 minmax 组合，若项目需兼容，应提供浮动或 Flex 回退样式，并通过 @supports 做特性检测。
总体而言，CSS Grid 的 repeat 加 minmax 是实现响应式列与自动换行的最优原生方案之一。它把复杂计算交给渲染引擎，让我们用极少量代码获得稳定、对齐、易维护的布局效果。