本文介绍如何通过 css grid 替代 flexbox，实现两个逻辑区块在移动端与桌面端的动态交织布局——如让主内容块穿插于侧边模块之间，兼顾语义结构与响应式需求。
在传统 display: flex 布局中，子元素严格遵循一维（单行或单列）顺序流式排列，无法天然支持“一个元素跨越多个兄弟元素位置”式的交织效果（例如：Div 1 置于 Div 2.1 和 Div 2.2 之间，且在桌面端又变为左侧主区块、右侧双行堆叠）。这种二维空间调度本质上超出了 Flexbox 的设计范畴——它不支持跨轴定位或显式坐标控制。
此时，CSS Grid 是更精准、更语义化且响应友好的解决方案。Grid 允许你为每个子元素独立指定行（grid-row）、列（grid-column）位置及跨度（span），同时配合媒体查询轻松切换布局结构。
以下是一个可直接运行的响应式交织布局示例：
<div class="layout-grid"> <div class="block block-main">主内容区（Div 1）</div> <div class="block block-sidebar-top">侧边栏上（Div 2.1）</div> <div class="block block-sidebar-bottom">侧边栏下（Div 2.2）</div> </div>
.layout-grid {
display: grid;
gap: 16px;
}
.block {
background: #4a90e2;
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
}
/* 移动端：垂直堆叠，顺序为 [侧上] → [主] → [侧下] */
.block-main {
grid-row: 2;
}
.block-sidebar-top {
grid-row: 1;
}
.block-sidebar-bottom {
grid-row: 3;
}
/* 桌面端（≥1024px）：双列布局，主区占左列全高，侧边栏并列右列 */
@media (min-width: 64rem) {
.layout-grid {
grid-template-columns: 1fr 1fr;
}
.block-main {
grid-row: 1 / span 2; /* 跨两行 */
grid-column: 1;
}
.block-sidebar-top {
grid-row: 1;
grid-column: 2;
}
.block-sidebar-bottom {
grid-row: 2;
grid-column: 2;
}
}✅ 关键优势说明：
立即学习“前端免费学习笔记（深入）”；
- 语义清晰：HTML 保持线性、无障碍友好的 DOM 顺序（推荐按逻辑优先级书写，如主内容优先），视觉顺序由 CSS Grid 控制；
- 响应灵活：仅需修改 grid-row/grid-column 和 grid-template-*，无需重构 HTML 或使用 hacky 绝对定位；
- 可维护性强：每个区块定位独立可控，新增模块只需添加对应规则，不影响现有逻辑。
⚠️ 注意事项：
- 避免在 Grid 中滥用 grid-area 命名区域（除非结构极其复杂），简单交织推荐直接使用 grid-row + grid-column 更直观；
- 若需兼容 IE11，请注意其 Grid 实现不完整（建议降级为 Flex + order 模拟，但交织能力受限）；
- 所有 grid-row/grid-column 值应确保无重叠冲突，可借助浏览器开发者工具的 Grid 叠加层实时调试。
总结：当布局需求涉及跨维度穿插、行列重组或响应式位置交换时，CSS Grid 不是“替代 Flexbox”，而是回归二维布局本质的正确选择。用好 grid-row、grid-column 与媒体查询组合，即可优雅实现真正意义上的“交织”。
