Grid布局需先设display: grid；gap统管行列间距；用grid-template-areas+@media切换结构更可控；auto-fit配合minmax实现自适应列数；注意grid-auto-flow隐式行为。
Grid 布局的核心：用 display: grid 启动，不是靠 float 或 flex 模拟
Grid 是 CSS 原生二维布局系统，必须显式声明容器为网格上下文。只写 grid-template-columns 不生效，前提是父容器已设 display: grid 或 display: inline-grid。常见错误是漏掉这一步，导致子元素仍按普通文档流排列。
推荐起步写法：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
注意：gap 在 Grid 中同时控制行距和列距，比 margin 更干净；1fr 表示“剩余空间均分”，不是固定像素，这是响应式基础。
响应式断点里别重复写整套 grid-template，用 grid-template-areas + @media 切换布局结构
直接在每个媒体查询里重写 grid-template-columns 和 grid-template-rows 容易失控。更可控的方式是先定义语义化区域名，再按屏幕尺寸重组：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
@media (max-width: 768px) {
.container {
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
对应子元素需设 grid-area: header 等，这样结构变化清晰、可读性强，也方便后续加动画或 JS 控制。
-
grid-template-areas中每行用引号包裹，空格分隔列，点（.）表示空单元格 - 所有区域名必须在子元素上通过
grid-area显式声明，否则不匹配 - 移动端优先时，建议从单列布局写起，再用
@media提升（min-width），避免覆盖逻辑混乱
自动填充列数用 repeat(auto-fit, minmax(...))，不是 repeat(12, 1fr)
固定列数（如 repeat(12, 1fr)）在小屏上会挤成一条细线，失去响应性。真正自适应的写法是让浏览器根据容器宽度和最小项宽自动计算列数：
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) );
含义：每个格子至少 250px 宽，最多占满可用空间的等分份额，列数随容器缩放动态增减。关键点：
- 必须用
auto-fit（不是auto-fill），它会合并空轨道，避免空白列 -
minmax(250px, 1fr)中的1fr是上限，不是固定值；实际渲染时各列可能不等宽（取决于内容） - 若需严格等宽，配合
justify-content: stretch和子项不设width
Grid 与 Flex 混用时，注意 grid-auto-flow 的隐式行为影响子项排列
当子元素数量超过显式定义的行列（比如只写了 2 行但有 5 个子项），Grid 默认用 grid-auto-flow: row 往下追加行——这可能导致意外换行，尤其和 Flex 子项混排时。
典型问题场景：侧边栏用 Grid，但内部卡片用 Flex；卡片高度不一致时，Grid 自动新增的行高可能塌陷或错位。
- 检查是否触发了隐式网格，用浏览器开发者工具看
grid-row/grid-column是否被自动分配 - 想强制填满指定行列，加
grid-auto-rows: minmax(200px, auto)设默认行高 - 若要禁止新增行，改用
grid-auto-flow: dense并配合grid-row/grid-column手动定位关键项
Grid 的响应能力很强，但它的“自动”部分恰恰是最容易被忽略的——尤其是隐式网格和 auto-fit 的交互逻辑，稍不注意就会在某个断点突然错乱。
