ResizeObserver监听CSS Grid项目宽度缩小时无法触发事件问题

问题原因 #

你遇到的问题源于Grid容器未显式定义列布局规则，同时给Grid项目设置了width:100%，导致Grid在容器缩小时，项目的尺寸变化没有被ResizeObserver正确捕获。Grid的布局计算逻辑和Block不同，无明确列定义时，Grid会基于默认规则分配空间，这可能让ResizeObserver错过尺寸缩小的事件。

解决方案 #

1. 给Grid容器添加明确的列定义（比如grid-template-columns: 1fr），让列宽严格跟随容器尺寸变化；
2. 移除Grid项目的width:100%——Grid项目默认会自动填充所在单元格空间，无需额外设置宽度。

修改后的代码示例 #

HTML（保持不变）

<div class="wrapper">
  <div class="item" id="item-1">
    <div id="item-1-child">Content</div>
  </div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr; /* 添加明确列定义 */
}

.item {
  background: orange;
  /* 移除width:100% */
  height: 20px;
}

JavaScript（保持不变）

const el = document.getElementById('item-1');
const elChild = document.getElementById('item-1-child')

const observer = new ResizeObserver(entries => {
  console.log('resize', el.offsetWidth)
  elChild.style.width = `${el.offsetWidth}px`;
});

observer.observe(el);

原理说明 #

添加grid-template-columns: 1fr后，列宽会同步容器的尺寸变化，Grid项目的尺寸也会随之严格更新，ResizeObserver就能正确捕获到放大和缩小的事件。移除width:100%是为了避免和Grid的自动填充规则冲突，确保项目尺寸完全由Grid布局控制。

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