使用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 可实现无需媒体查询的自适应网格布局，每列最小280px，剩余空间均分，配合 gap、padding 及子项样式控制，确保响应式稳定与内容保形。
用 grid-template-columns: repeat(auto-fit, minmax(最小宽度, 1fr)) 就能实现真正随容器宽度自动伸缩的 Grid 布局，无需写一堆媒体查询。
核心写法：一招定列数
在网格容器上设置：
- display: grid 启用网格布局
-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) —— 每列至少 280px（保障可读/可点），超出部分由所有列均分（
1fr） -
gap: 1rem 或具体数值（如
12px），控制格子间距
auto-fit vs auto-fill：别选错
两者行为差异直接影响排版稳定性：
- auto-fit：浏览器会创建尽可能多的列，但把没内容的轨道“收掉”，已有列自动拉宽填满剩余空间 → 布局紧凑、图片不被压扁，适合相册、新闻卡片等多数场景
- auto-fill：保留所有可能轨道（包括空列），小屏下可能出现极窄列，导致子项被强制压缩变形
配套细节不能漏
只写 grid-template-columns 不够，还需配合这些关键点：
- 给容器加 padding 等于 gap 值（如
gap: 12px→padding: 12px），避免最外侧格子紧贴边缘 - 子项必须是网格容器的直接子元素，中间不能套 wrapper div
- 子项禁用
width、float、display: inline-block，否则会锁死列宽 - 图片类内容建议设
aspect-ratio: 1 / 1+width: 100%; height: 100%; object-fit: cover，保形不拉伸
适配不同内容类型的小调整
根据用途微调 minmax() 的最小值：
- 相册墙、商品列表：常用
minmax(280px, 1fr)（兼顾手机横屏与桌面） - 新闻资讯卡片：推荐
minmax(320px, 1fr)（保障文字阅读舒适性） - H5 营销页模块区：可设
minmax(300px, 1fr)或minmax(200px, 1fr)（更灵活适配小屏竖屏）
