真正响应式网格应使用 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))，使列数随容器宽度自动增减；配合媒体查询调整 gap、字体等辅助属性，必要时用 grid-template-areas 改变区域布局。
用 grid-template-columns 配合 minmax() 和 auto-fit 实现自适应列数
固定列数（比如 grid-template-columns: repeat(4, 1fr)）在小屏上必然溢出。真正响应式的做法是让列数随容器宽度自动增减。
关键组合是：grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)))。这里 minmax(250px, 1fr) 表示每列最小 250px、最大均分剩余空间；auto-fit 会让浏览器尽可能多地放入符合最小宽度的列，空余空间由所有列平分。
-
auto-fit会折叠空轨道，auto-fill则保留空轨道（可能导致滚动），多数场景选auto-fit - 250px 是经验值，需根据内容（如卡片宽度、文字折行点）调整，太大会导致小屏只剩 1 列，太小则大屏列数过多
- 该写法不依赖媒体查询，纯 CSS，但需父容器有明确宽度（如
width: 100%或设为inline-grid）
配合 @media 调整 grid-gap 和整体行为
minmax() 解决列数问题，但间距、行高、对齐方式仍需断点控制。例如手机端需要更大间隙便于触控，而桌面端可紧凑些。
/* 默认小屏 */
.grid {
grid-gap: 0.75rem;
}
<p>@media (min-width: 768px) {
.grid {
grid-gap: 1.25rem;
}
}</p><p>@media (min-width: 1024px) {
.grid {
grid-gap: 1.5rem;
}
}-
grid-gap在 Flex 布局中叫gap，Grid 中两者等价，但旧版浏览器需用grid-column-gap/grid-row-gap - 避免在每个断点里重写整个
grid-template-columns，优先复用minmax()基础逻辑，只调间隙、字体、padding 等辅助属性 - 如果某断点需彻底改变布局（如从 2 列网格变为单列堆叠+侧边栏），再用
@media覆盖整个grid-template-areas
用 grid-template-areas 控制不同屏幕下的区域顺序和合并
当页面包含 header、sidebar、main、footer 等语义区域，且希望小屏上下堆叠、大屏左右并列时，grid-template-areas 比单纯靠 order 更直观可靠。
立即学习“前端免费学习笔记（深入）”；
.layout {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
<p>@media (min-width: 900px) {
.layout {
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
}- 每个引号内是一行，用空格分隔区域名；重复区域名（如
"header header"）表示横向跨列 - 必须给每个区域元素设置
grid-area: header等对应值，否则不生效 - 注意：IE 不支持
grid-template-areas，若需兼容 IE，得回退到 float 或 flex 布局
响应式 Grid 的常见失效原因
写完代码却没效果？大概率卡在这几个地方：
- 父容器没有设定
display: grid，或被其他样式（如float、display: inline）覆盖 - 子元素设置了
float或display: inline-block，Grid 子项会忽略这些声明，但可能干扰盒模型计算 - 使用了
grid-template-columns: repeat(3, 1fr)却忘了加minmax()，导致小屏下每列强行撑满 1/3 宽度，内容被压缩或换行异常 - 在
@media中修改了grid-template-columns，但没同步调整grid-column或grid-area，导致某些子项位置错乱
Grid 响应式真正的难点不在语法，而在理解“容器驱动”——所有响应行为都源于容器宽度变化，而非视口本身。一旦嵌套多层 Grid 或混用 Flex，就容易丢失这个前提。
