fr是Grid弹性单位，按比例分配剩余空间，适配不同屏幕；混用时固定值优先于minmax()和fr；响应式应重构布局而非缩放；auto-fit+minmax实现自适应列数；gap比margin更安全控制间距。
grid-template-columns 用 fr 单位而不是固定 px
固定宽度列在小屏幕上必然溢出，fr 是 grid 的弹性单位，会按比例分配剩余空间。它不是像素，也不依赖父容器具体尺寸，天然适配不同屏幕。
-
fr只在grid-template-columns或grid-template-rows中生效，不能用于width或margin - 多个
fr值相加不需等于 1：1fr 2fr 1fr表示三列按 1:2:1 分配可用空间 - 混用时优先级：固定值（如
200px）→minmax()→fr；例如200px 1fr minmax(300px, 1fr)
grid-template-columns: 200px 1fr minmax(300px, 2fr);
@media 中调整 grid 模板结构而非只改尺寸
响应式 grid 的核心不是“缩放”，而是“重构”。比如桌面端三栏，移动端应改为单列堆叠，靠 @media 切换 grid-template-columns 和 grid-template-areas 更可靠。
- 避免只调
font-size或padding来“假装”响应式——内容挤在一起仍不可用 - 断点选值建议用内容驱动：比如当侧边栏文字开始折行，就是切换单列的信号，而不是硬套
768px -
grid-template-areas在媒体查询中重定义，能清晰控制区域流向，比单纯改列数更可控
@media (max-width: 600px) {
.layout {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
}用 minmax() + auto-fit 实现“自动列数”布局
想让卡片列表在宽屏显示 4 列、窄屏自动变成 2 列甚至 1 列？不用写多个 media query，repeat(auto-fit, minmax(250px, 1fr))) 就能动态计算列数。
-
auto-fit会合并空轨道，auto-fill则保留空轨道，多数场景用auto-fit -
minmax(250px, 1fr)表示：每列至少 250px，最多占满剩余空间的均等份额 - 注意：父容器需有明确宽度（如
width: 100%），否则1fr无参照
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))));
gap: 1rem;
}gap 属性比 margin 更安全地控制间距
用 margin 控制 grid 子项间距容易引发外边距合并、响应式错位等问题；gap 是 grid 专属属性，只作用于网格轨道之间，不受子项自身 margin 干扰。
立即学习“前端免费学习笔记（深入）”；
-
gap不支持 IE，如需兼容，可用grid-column-gap/grid-row-gap（已废弃但兼容性更好） - 不要对 grid 子项设
margin来模拟间隙——尤其在auto-fit场景下，列数变化时 margin 会破坏对齐 -
gap可设为单值（行列同距）或双值（row-gap column-gap），顺序与margin相反
.grid {
display: grid;
gap: 1.2rem; /* 等价于 row-gap: 1.2rem; column-gap: 1.2rem; */
}实际项目中最容易忽略的是：grid 容器本身没设 width 或被浮动/绝对定位干扰，导致 1fr 失效；还有把 fr 当成百分比用，在嵌套 grid 里误以为 “1fr = 100% 宽度”——它始终是相对于当前网格容器的可用空间。
