在css grid中利用`minmax()`实现完全响应式卡片流，核心做法是设置`grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))`。这会让浏览器自动计算一行能容纳多少个最小宽度为250px的列，剩余空间由`1fr`均分填充。当容器宽度变化时，卡片数量会自动增减，无需编写媒体查询即可实现从单列到多列的平滑过渡。
如何调整卡片的临界宽度以适配不同屏幕？
通过修改`minmax()`的第一个参数（最小值）来改变卡片的临界宽度。例如，将`250px`改为`300px`，卡片会在更宽的屏幕上才开始换行；若改为`150px`，则会在较窄的屏幕上就增加列数。这个值通常对应你希望卡片保持可读性的最小宽度。
/* 基础网格布局 */
.grid-container {
display: grid;
gap: 16px;
/* 关键代码：自动填充，最小250px，最大1fr */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.card {
background: #f0f0f0;
padding: 20px;
border-radius: 8px;
}为什么有时需要配合max-width而不是固定宽度？
如果卡片内容过长或需要在超大屏幕上限制最大宽度，可以在`.card`内部添加`max-width`。虽然`1fr`会拉伸卡片填满剩余空间，但`max-width`可以防止卡片在某些极端宽屏下变得过宽而难以阅读。此时`minmax`负责列的排列，`max-width`负责单卡的视觉边界。
立即学习“前端免费学习笔记（深入）”；
.card {
background: #f0f0f0;
padding: 20px;
border-radius: 8px;
/* 可选：限制单卡最大宽度 */
max-width: 400px;
margin: 0 auto; /* 居中显示 */
}当容器宽度小于最小列宽时会发生什么？
当容器总宽度小于单个`minmax`定义的最小宽度（如250px）时，`auto-fill`行为会导致所有卡片强制堆叠成单列，或者如果设置了`auto-fit`且没有足够空间，可能会产生溢出。通常建议确保容器的最小宽度至少能容纳一个卡片的最小尺寸，或者使用`overflow-x: auto`来处理极小屏幕下的横向滚动需求。
