如何使用 CSS Grid 实现 div 的“交织”布局（响应式跨行跨列排列）

如何使用 CSS Grid 实现 div 的“交织”布局（响应式跨行跨列排列）第1张

本文介绍如何通过 css grid 替代 flexbox，实现两个逻辑区块在移动端与桌面端的动态交织布局——如让主内容块穿插于侧边模块之间，兼顾语义结构与响应式需求。

在传统 display: flex 布局中，子元素严格遵循一维（单行或单列）顺序流式排列，无法天然支持“一个元素跨越多个兄弟元素位置”式的交织效果（例如：Div 1 置于 Div 2.1 和 Div 2.2 之间，且在桌面端又变为左侧主区块、右侧双行堆叠）。这种二维空间调度本质上超出了 Flexbox 的设计范畴——它不支持跨轴定位或显式坐标控制。

此时，CSS Grid 是更精准、更语义化且响应友好的解决方案。Grid 允许你为每个子元素独立指定行（grid-row）、列（grid-column）位置及跨度（span），同时配合媒体查询轻松切换布局结构。

以下是一个可直接运行的响应式交织布局示例：

主内容区（Div 1）

.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;
  }
}

✅ 关键优势说明：

立即学习“前端免费学习笔记（深入）”；