移动端Div重组为桌面端布局：适配响应式及元素隐藏场景

问题核心 #

你用Grid布局遇到的两个关键问题：

1. 预定义的网格区域会强制拉伸右侧元素，破坏高度自适应效果
2. 当部分Div因无内容隐藏时，固定的grid-template-areas会留下空白，无法自动适配剩余元素

推荐方案：Flexbox + 媒体查询（动态场景首选） #

Flexbox的流式布局特性，在元素显示/隐藏时能自动调整位置，同时通过嵌套逻辑实现左右分栏，彻底解决拉伸和适配问题，且无需改动移动端DOM结构。

代码实现 #

HTML结构（保持移动端垂直顺序）

<div class="wrapper">
  <div class="a red">A</div>
  <div class="b blue">B</div>
  <div class="c red">C</div>
  <div class="d blue">D</div>
  <div class="e blue">E</div>
  <div class="f red">F</div>
</div>

CSS样式

/* 移动端：垂直流式排列 */
.wrapper {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
}

.red, .blue {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-weight: bold;
  color: #fff;
  font-size: 15px;
}

.red { background: red; }
.blue { background: blue; }

/* 桌面端：左右分栏+交叉对齐 */
@media (min-width: 768px) {
  .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
  }

  /* 左侧栏：固定宽度 */
  .a, .c, .f {
    flex: 0 0 150px;
    width: 150px;
  }

  /* 右侧栏：自动填充剩余宽度 */
  .b, .d, .e {
    flex: 1;
    min-width: 0; /* 避免内容溢出 */
  }

  /* 通过order属性控制元素排列顺序 */
  .a { order: 0; }
  .b { order: 1; }
  .c { order: 4; }
  .d { order: 2; }
  .e { order: 3; }
  .f { order: 5; }

  /* 占位元素实现左右交叉对齐 */
  .wrapper::before {
    content: '';
    flex: 0 0 150px;
    order: 2;
    height: 0;
  }
}

方案优势 #

• 无强制拉伸：右侧元素高度由自身内容决定（示例中固定60px，实际可改为自适应）
• 动态适配隐藏元素：任意Div隐藏后，剩余元素自动填补空白，不会出现布局错位
• DOM结构不变：完全通过CSS实现响应式切换，符合移动端优先的设计原则

备选方案：改进版Grid布局（固定元素场景） #

如果坚持用Grid，可放弃固定grid-template-areas，改用grid-row/grid-column手动定位，提升灵活性：

.wrapper {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 15px;
  padding: 10px;
}

.a { grid-row: span 2; }
.c { grid-row: span 2; }
.d { grid-row: span 2; grid-column: 2; }
.e { grid-row: span 2; grid-column: 2; }

这种写法在元素隐藏时会自动收缩行高，但适配灵活性仍不如Flexbox，适合元素数量固定的场景。

内容的提问来源于stack exchange，提问作者WebDevZ