CSS Grid布局无响应：调整textarea时元素出现间隙问题

问题根源 #

使用grid-template-columns: auto auto ...定义Grid列时，列宽仅基于元素初始尺寸计算。当拖动textarea的调整手柄改变宽度时，Grid不会自动重新计算列宽，导致被调整的textarea超出原有列宽，与相邻元素出现间隙，且其他元素无法响应尺寸变化。

解决方案 #

通过CSS调整Grid布局规则，结合JavaScript监听尺寸变化同步列宽，实现拖动textarea时其他元素自动响应：

1. 修正CSS代码

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.grid-container {
  position: relative;
  background-color: pink;
  display: grid;
  padding: 20px;
  /* 初始列宽匹配textarea初始尺寸 */
  grid-template-columns: repeat(6, min-content);
  gap: 0; /* 移除Grid默认间隙 */
  text-align: center;
}

.item {
  background-color: green;
  border: 1px solid black;
  font-size: 40px;
  resize: horizontal;
  width: auto; /* 让textarea宽度决定网格项宽度 */
  min-width: 100px; /* 设置最小宽度避免过窄 */
}

2. 添加JavaScript监听

const gridContainer = document.querySelector('.grid-container');
const textareas = document.querySelectorAll('.item');

// 更新Grid列宽为每个textarea的当前宽度
function updateGridColumns() {
  const columnWidths = Array.from(textareas).map(ta => `${ta.offsetWidth}px`);
  gridContainer.style.gridTemplateColumns = columnWidths.join(' ');
}

// 初始化列宽
updateGridColumns();

// 监听每个textarea的尺寸变化
textareas.forEach(ta => {
  const observer = new ResizeObserver(() => {
    updateGridColumns();
  });
  observer.observe(ta);
});

3. 修正HTML中的无效ID

你的代码中有三个textarea使用了相同的id="item10"，ID必须唯一，需修改为item10、item11、item12：

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<div class="grid-container">
  <textarea class="item" id="item1">1</textarea>
  <textarea class="item" id="item2">2</textarea>
  <textarea class="item" id="item3">3</textarea>
  <textarea class="item" id="item4">4</textarea>
  <textarea class="item" id="item5">5</textarea>
  <textarea class="item" id="item6">6</textarea>
  <textarea class="item" id="item7">7</textarea>
  <textarea class="item" id="item8">8</textarea>
  <textarea class="item" id="item9">9</textarea>
  <textarea class="item" id="item10">10</textarea>
  <textarea class="item" id="item11">11</textarea>
  <textarea class="item" id="item12">12</textarea>
</div>

效果说明 #

拖动任意textarea的右侧调整手柄时，ResizeObserver会立即捕获尺寸变化，同步更新Grid的列宽，所有相邻元素会自动调整位置，不会出现间隙，实现响应式的尺寸联动。

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