黄金三行
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 28px;
}它是怎么工作的
auto-fill：能放几列放几列，自动换行minmax(300px, 1fr)：每列最窄 300px，有富余就平分- 完全不需要写媒体查询
auto-fill 与 auto-fit 的区别
auto-fill 会保留空轨道，auto-fit 会把空轨道折叠、让现有列拉伸填满。
卡片列表用 auto-fill 更稳定；想让最后一行铺满则用 auto-fit。
总结
本博客的首页卡片列表正是用这三行代码实现的，欢迎打开开发者工具验证。