直接用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 即可实现免媒体查询的真正响应式多列布局，auto-fit 收缩空轨道避免留白，minmax() 确保每列不小于300px且弹性均分剩余空间，天然等高、无需JS或固定高度，兼容现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+），但IE需降级为flex。
直接用 grid-template-columns 配合 minmax() 和 auto-fit，就能在不写任何媒体查询的前提下实现真正响应式的多列布局——比 float 稳定，比 flex 更可控，且天然等高。
为什么不用 columns 属性做卡片类多列？
columns 是为连续文本流设计的，不是为卡片、图片、表单这类块级组件准备的。你一旦给容器设 column-count: 3，再往里塞 <div class="card">，浏览器会把它当成“可折行段落”来切，结果就是卡片被硬生生劈成两半出现在不同列里。
常见错误现象：
- 图片或标题被截断，只显示上半部分
- 点击区域错位，
hover效果只在半块元素上生效 - 无障碍阅读器读不出完整语义，因为 DOM 结构和视觉顺序严重脱节
正确做法：把 columns 留给纯文章段落；卡片类布局一律用 display: grid。
立即学习“前端免费学习笔记（深入）”；
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))) 怎么理解？
这行声明是整个方案的核心，它告诉浏览器：“每列至少 300px 宽，最多均分剩余空间；容器不够宽时自动减少列数，不留空轨道”。
关键点说明：
-
minmax(300px, 1fr)中的300px是最小宽度阈值，不是固定值——小屏下它会触发换列，而不是压缩列宽 -
auto-fit会让空轨道收缩消失；auto-fill则保留所有预分配轨道，容易导致小屏出现大量空白列 -
gap直接控制列间/行间间距，无需像 float 那样靠负 margin 折腾 - 子项不需要设
width，也不该设width: 100%，否则可能撑破列宽导致横向滚动
哪些兼容性问题必须提前踩坑？
现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+）对这套语法支持良好，但仍有几个实际项目里高频出问题的点：
- Safari 15.4 之前不支持
minmax(auto, 1fr)，所以别用minmax(auto, 1fr)，改用minmax(280px, 1fr) - IE11 只认旧 Grid 语法（
display: -ms-grid），如果必须兼容，建议降级到display: flex，而不是退回float - 别在 Grid 容器上同时写
float: left或display: inline-block，会强制重置display值，Grid 失效 - 用
grid-column: span 2合并列时，会影响auto-fit的轨道计数逻辑——务必用 5 个、7 个、11 个子项分别测试，不能只看 6 个时的效果
真正难的不是属性怎么拼，而是放弃“每个卡片自己决定宽度”的思维，转而接受“列数、列宽、间距全由父容器定义”这个前提。一旦习惯容器驱动的逻辑，grid-template-columns 就成了最省心的响应式多列解法。
