如何在CSS网格中仅当div A与div C等高时让div B占满整行？

要实现当div A和div C高度相等时，让div B扩展为整行的效果，需要结合CSS Grid和JavaScript完成——因为这涉及动态高度判断，纯CSS无法实现这种条件式布局变化。

实现步骤 #

1. 基础HTML结构

先搭建网格容器和三个子元素的基础结构：

<div class="grid-container">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
</div>

2. 初始CSS布局

用CSS Grid定义初始的2行2列布局，让C默认占据右侧两行空间：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
  gap: 10px; /* 单元格间距 */
  padding: 10px;
}

.box {
  border: 1px solid #333;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 初始状态：C占据右侧两行 */
.c {
  grid-row: 1 / span 2;
}

3. 用JavaScript监听高度变化并调整布局

通过JavaScript监听元素高度变化，当A和C高度相等时，修改B和C的网格属性：

const a = document.querySelector('.a');
const b = document.querySelector('.b');
const c = document.querySelector('.c');

// 定义布局调整函数
function adjustLayout() {
  const aHeight = a.offsetHeight;
  const cHeight = c.offsetHeight;

  if (aHeight === cHeight) {
    // 让B占据整行
    b.style.gridColumn = '1 / -1';
    // 让C只占据第一行右侧
    c.style.gridRow = '1 / span 1';
  } else {
    // 恢复初始布局
    b.style.gridColumn = '';
    c.style.gridRow = '1 / span 2';
  }
}

// 页面加载时先检查一次
adjustLayout();

// 监听窗口大小变化
window.addEventListener('resize', adjustLayout);

// 监听元素内容变化（比如动态加载内容导致高度改变）
const observer = new MutationObserver(adjustLayout);
observer.observe(a, { childList: true, subtree: true });
observer.observe(c, { childList: true, subtree: true });

原理说明 #

• 初始状态下，CSS Grid让C占据右侧两行，B固定在左下位置。
• JavaScript通过offsetHeight获取A和C的实际高度，当两者相等时，修改B的grid-column: 1 / -1（表示从第一列到最后一列，即整行），同时把C的grid-row改回只占据第一行。
• 加入resize事件监听和MutationObserver，确保窗口大小变化或元素内容动态改变时，能实时检查高度并调整布局。

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