无需JS实现非均匀网格布局及响应式元素位置调整

当然有不用JS的解决办法！你之前用CSS Grid遇到的空白问题，是因为固定了grid-row导致A和B强行共享同一行高度，其实只要调整Grid的写法，或者用Flexbox配合媒体查询，就能完美实现需求。下面给你两种可行方案：

方案一：CSS Flexbox（更适合流式顺序调整） #

Flexbox的order属性可以轻松控制元素在不同屏幕尺寸下的显示顺序，而且不会出现元素高度绑定的问题。

完整代码示例 #

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
</div>

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

/* 大屏幕布局：A左，B右，C在A下方 */
.a {
  width: 600px;
}
.b {
  width: 300px;
}
.c {
  width: 100%; /* 占满整行 */
}

/* 小屏幕布局：B插入A和C之间 */
@media (max-width: 920px) { /* 这里的数值是600+300+gap，可按需调整 */
  .a, .b {
    width: 100%; /* 都占满整行 */
  }
  .a { order: 1; }
  .b { order: 2; }
  .c { order: 3; }
}

说明 #

• 大屏幕时，A和B并排，C独占一行；
• 小屏幕触发媒体查询后，所有元素都占满宽度，通过order属性调整B到A和C之间；
• gap属性控制元素间距，避免手动加margin的麻烦。

方案二：改进版CSS Grid（解决你之前的空白问题） #

你之前的Grid写法问题在于固定了grid-row，导致A和B必须在同一行且高度一致。我们可以让Grid自动处理行高度，再通过媒体查询调整元素位置：

完整代码示例 #

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
</div>

.wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: 600px 300px; /* 大屏幕两列 */
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
}

.a { grid-column: 1; }
.b { grid-column: 2; grid-row: 1; } /* B单独在第二列第一行 */
.c { grid-column: 1; } /* C自动在A下方，高度由内容决定 */

/* 小屏幕布局：改为单列，调整B的位置 */
@media (max-width: 920px) {
  .wrapper {
    grid-template-columns: 1fr; /* 单列布局 */
  }
  .b { grid-row: 2; } /* B放到A之后，C之前 */
}

说明 #

• 大屏幕时，A和C在第一列自动垂直排列，高度各自由内容决定；B在第二列第一行，不会影响A和C的间距；
• 小屏幕改为单列后，通过grid-row:2把B放到A和C之间，完美实现需求。

这两种方案都完全不需要JS，而且能解决你之前遇到的空白间隙问题，选哪种看你更习惯哪种布局方式~

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