Grid网格布局是CSS中用于实现二维布局的核心方案，相比传统的浮动、弹性盒布局，它能更精准地控制行和列的分布。在实际开发中，我们经常会遇到需要根据容器宽度自动调整栅格数量、内容自动换行的需求，而auto-fill和minmax两个属性的组合就能完美实现这个效果。
auto-fill与minmax的作用原理
要理解二者如何配合实现自动换行，首先需要明确两个属性各自的作用：
- minmax(min, max)：用于定义栅格轨道的最小和最大尺寸，当设置
minmax(100px, 1fr)时，表示每个栅格的宽度最小为100px，最大为剩余空间的1份。 - auto-fill：是
grid-template-columns的重复函数repeat()的参数，作用是自动根据容器宽度填充尽可能多的栅格轨道，直到容器宽度不足以放下更多的轨道为止。
基础实现示例
下面通过一个简单的示例展示如何使用这两个属性实现内容自动换行并控制栅格数量：
/* 容器样式 */
.grid-container {
display: grid;
/* 核心设置：自动填充栅格，每个栅格最小200px，最大占1份剩余空间 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
padding: 20px;
background-color: #f5f5f5;
}
/* 栅格项样式 */
.grid-item {
height: 120px;
background-color: #4a90e2;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
border-radius: 8px;
}
对应的HTML结构如下：
<div class="grid-container">
<div class="grid-item">栅格1</div>
<div class="grid-item">栅格2</div>
<div class="grid-item">栅格3</div>
<div class="grid-item">栅格4</div>
<div class="grid-item">栅格5</div>
<div class="grid-item">栅格6</div>
</div>
上述代码中，repeat(auto-fill, minmax(200px, 1fr))的逻辑是：浏览器会先计算容器当前宽度可以放下多少个最小宽度为200px的栅格，然后把这些栅格的宽度平均分配剩余空间，当容器宽度缩小到无法放下下一个200px的栅格时，多余的栅格就会自动换行到下一行。
如何控制栅格数量
要调整每行显示的栅格数量，只需要修改minmax的第一个参数（最小宽度）即可：
- 如果希望每行最多显示3个栅格，可以将最小宽度设置为
calc(100% / 3 - 间隙补偿)，比如minmax(calc(33.33% - 20px), 1fr)，这里的20px是间隙和padding的补偿值。 - 如果希望每行最少显示2个栅格，可以将最小宽度设置为
calc(50% - 10px)，确保即使容器宽度缩小，也不会出现单个栅格占满整行的情况。
下面是一个控制每行最多显示4个栅格的示例：
.four-col-grid {
display: grid;
/* 最大4个栅格，每个最小宽度为 calc(25% - 12px)，减去的12px是间隙的补偿 */
grid-template-columns: repeat(auto-fill, minmax(calc(25% - 12px), 1fr));
gap: 16px;
padding: 20px;
}
注意事项
使用auto-fill和minmax时需要注意几个常见问题：
- auto-fill会在容器宽度足够时创建空的栅格轨道，如果不需要空轨道，可以替换为auto-fit，二者的区别是auto-fit会把空的轨道折叠，让现有栅格占据剩余空间。
- minmax的最大值如果设置为fr单位，会按照剩余空间的比例分配，如果设置为固定值比如200px，那么栅格宽度不会超过200px，多余的空间会留白。
- 当栅格项的内容宽度超过minmax设置的最小宽度时，栅格会被内容撑开，此时需要给栅格项设置
min-width: 0或者overflow: hidden来避免布局错乱。
实际场景应用
这种布局方式非常适合商品列表、卡片列表、图标墙等场景，无需编写多个媒体查询就能适配手机、平板、PC等不同屏幕尺寸，大幅减少布局相关的CSS代码量。比如电商的商品列表，只需要设置grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))，就能在PC端每行显示4-5个商品，平板端每行显示2-3个，手机端每行显示1-2个，完全自动适配。