最稳写法是grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))，小屏自动单列、中屏双列、大屏多列，auto-fit收缩空列避免留白，无需媒体查询；禁用auto-fill以防空白间隙。
CSS Grid 本身不自带“移动端优先”逻辑，但你可以用 @media 配合 grid-template-columns 的 minmax() + auto-fit/auto-fill 组合，在单一样式表里实现真正响应、无需重复定义的移动端优先布局。
用 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)))) 替代固定列数
这是最常用也最容易写错的核心模式。很多人直接写 repeat(3, 1fr)，结果在小屏上三列强行挤压，文字重叠或溢出。
-
minmax(300px, 1fr)表示：每列最小 300px（保证可读性），最大占满剩余空间； -
auto-fit会自动收缩空列，让内容只占实际需要的列数； - 小屏下自动变成 1 列，中屏 2 列，大屏才铺满 3 或 4 列——无需额外媒体查询；
- 注意：
auto-fill会保留空轨道，auto-fit才真正“收缩”，选错会导致空白间隙或换行异常。
避免在 @media 中重复声明整个 grid 结构
常见错误是为手机、平板、桌面各写一套 display: grid + grid-template-areas，导致维护成本飙升且容易漏改。
- 基础样式（移动端）直接用
grid布局，例如grid-template-areas: "header" "main" "footer"； - 仅在大屏时用
@media (min-width: 768px)覆盖grid-template-areas为"header header" "nav main" "footer footer"； - 所有子元素的
grid-area保持不变，复用同一套语义命名； - 不要在媒体查询里重新写
display: grid或grid-gap——除非真有特殊需求，否则纯属冗余。
grid-auto-flow: dense 不要乱开，尤其配合 span 时
想让小卡片自动填满空隙？grid-auto-flow: dense 看似省事，但在移动端常引发不可控的视觉顺序错乱，比如“评论区”跑到标题前面。
立即学习“前端免费学习笔记（深入）”；
- 默认
grid-auto-flow: row严格按 DOM 顺序逐行排列，语义和可访问性都安全； -
dense会让 Grid 尝试回填前面的空位，破坏阅读流，对屏幕阅读器不友好； - 真正需要“紧凑填充”的场景（如瀑布流式图库），应搭配
grid-template-rows: masonry（需 Chrome 115+ 支持）或 JS 方案，而非依赖dense； - 如果用了
span 2的头条卡片，dense可能把它塞进中间缝隙，导致后续内容错位——调试时很难定位。
真正难的不是写几行 grid，而是判断哪些布局逻辑该由 Grid 承担、哪些该交给语义 HTML 和弹性容器（比如 flex 处理按钮组）。Grid 擅长二维区域划分，别让它去干一维对齐的活——否则响应行为反而更难控制。
