直接在媒体查询中修改 grid-template-columns 即可实现响应式布局：小屏用 repeat(2, 1fr)，大屏（≥1200px）用 repeat(5, 1fr)，容器需设 display: grid 和 box-sizing: border-box，统一 gap 而非 margin，输入元素自动占满格子，命名区域需同步重定义，避免使用 auto-fit。
直接在媒体查询里改 grid-template-columns 就行，大屏设 repeat(5, 1fr)，小屏设 repeat(2, 1fr)，不需要隐藏元素或重写子项样式。
基础结构先写对
容器必须设 display: grid，子项是它的直接子元素。别漏掉 box-sizing: border-box 和统一的 gap，不然 padding 或边框容易撑破布局。
- 默认用小屏断点（移动端优先），写
grid-template-columns: repeat(2, 1fr) - 加
gap: 1rem控制行列间距，比用 margin 更稳 - 所有输入类元素（
input、textarea）在 Grid 里会自动占满所在格子，不用额外设width: 100%
媒体查询只改列数，不碰子项
大屏规则只覆盖容器的列定义，不要去动子项的 grid-column 或 flex-basis。选对断点单位和条件，避免冲突。
- 写
@media (min-width: 1200px)启用五列，里面只写grid-template-columns: repeat(5, 1fr) - 断点值别用模糊描述，比如 “大屏”——明确写像素值，如
1200px或1440px - 别混用
max-width和min-width断点，例如(max-width: 1199px)和(min-width: 1200px)才能无缝衔接
命名区域要同步重定义
如果用了 grid-template-areas 做语义化布局，小屏两列和大屏五列的模块顺序很可能不同。这时不能只改列数，得在对应媒体查询里一起重写 grid-template-areas 和子项的 grid-area。
- 比如大屏中
"header main aside sidebar footer"，小屏可能合并为"header main footer" - 每个区域名必须在父容器的
grid-template-areas中声明，否则grid-area不生效 - 区域名之间用空格分隔，每行用引号包裹，换行不影响解析
别用 auto-fit 替代确定列数
repeat(auto-fit, minmax(240px, 1fr)) 能动态算列数，但无法保证“正好五列”或“固定两列”。有明确列数要求时，媒体查询仍是唯一可靠方式。
- auto-fit 在宽度刚好卡在临界点时可能少一列或多一列，视觉上不稳定
- 设计稿明确要求五列布局时，
repeat(5, 1fr)比任何自动计算都精准 - 浏览器原生支持媒体查询，响应旋转、分屏、缩放等场景，比 JS 监听更轻量也更健壮
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
