用 flex 布局父容器可让多个 grid 容器横向并排，因 grid-template-columns 仅控制单个网格内部列，不影响容器间排列；inline-grid 不稳定，嵌套 Grid 更适合同一布局内的功能区块划分。
如何用 display: grid 让多个网格容器横向并排？
多个网格容器默认是块级元素，会垂直堆叠。想让它们并排，关键不是在子项上做文章，而是控制这些网格容器本身的布局行为。
最直接有效的方式是把它们的父容器设为 display: flex，然后让每个网格容器成为弹性子项：
section {
display: flex;
gap: 1rem;
}
.grid-container-1,
.grid-container-2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
flex: 1; /* 可选：均分宽度 */
min-width: 200px; /* 防止过度压缩 */
}不推荐给每个网格容器加 float 或 inline-block —— 容易触发 BFC、换行、基线对齐等意外问题，且响应式支持差。
为什么不能只靠 grid-template-columns 实现“多个网格并排”？
grid-template-columns 控制的是单个网格内部列的划分，和“多个网格容器如何排列”完全无关。这是初学者最常混淆的点。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 写了
grid-template-columns: 1fr 1fr，但两个.grid-container还是上下排列 - 误以为给父容器加
display: grid并设置多列，就能自动把子网格塞进去 —— 实际上子网格只是普通 grid item，不会“继承”或“展开”成独立网格上下文
真正起作用的是容器级显示模式（flex / grid / inline-grid），不是内部模板定义。
display: inline-grid 能否替代 flex 父容器？
可以，但限制明显：
-
inline-grid会让网格容器变成行内级元素，受父容器white-space和换行影响 - 无法使用
gap（IE/Edge 旧版不支持，且部分浏览器对 inline-grid 的 gap 行为不一致） - 宽度计算依赖内容，难以精确控制尺寸分配
- 响应式断点下容易意外换行，调试困难
示例中若强行用 inline-grid：
.grid-container-1 { display: inline-grid; grid-template-columns: 1fr 1fr; }
.grid-container-2 { display: inline-grid; grid-template-columns: 1fr 1fr 1fr; }—— 看似能并排，但一旦容器宽度不足，第二个就会掉到下一行，且无可靠方式阻止。
嵌套 Grid：当“多个网格”其实是同一容器内的不同区域
如果所谓“多个网格”本质是同一布局中的功能区块（比如左侧导航 + 右侧内容 + 底部工具栏），更合理的做法是单个 display: grid 容器 + grid-template-areas 或显式轨道划分：
.main-layout {
display: grid;
grid-template-areas:
"nav main"
"nav footer";
grid-template-rows: 1fr auto;
grid-template-columns: 200px 1fr;
}
.nav { grid-area: nav; }
.main { grid-area: main; }
.footer { grid-area: footer; }这种结构避免了多个独立网格带来的间距协调、对齐基准、响应式同步等额外复杂度。只有当各区域确实需要独立的列数/行数/响应逻辑时，才考虑分离为多个网格容器。
嵌套 Grid 的真实难点在于 track sizing 传播和 minmax() 在不同层级的交互，而不是“怎么让它们看起来并排”。
