如何让CSS display: grid兼具flex自适应特性且尺寸固定后保持刚性？

要达成你需要的「像Flex一样为长标题留足空间，最终尺寸固定不变」的效果，分两步操作即可：先让Grid列根据内容自动调整宽度，再通过JS锁定计算后的列宽，避免后续内容变动影响布局。

第一步：让Grid列自适应内容 #

替换你原有的固定列宽写法，用能适配内容的属性配置Grid：

<div id="grid">
  <div id="item1">短标题</div>
  <div id="item2">这是一个非常长的标题，需要更多空间来显示</div>
  <div id="item3">中等长度的标题内容</div>
</div>

#grid {
  height: 100px;
  display: grid;
  grid-template-columns: auto auto; /* 两列布局，每列宽度随内容自适应 */
  gap: 10px;
}

#grid > div {
  border: 1px solid #ddd;
  padding: 8px;
}

这里用auto作为列宽，Grid会自动为长内容的列分配更多空间，和Flex的自适应表现一致。如果你的列数不固定，想让元素自动按列排列，可以改成：

#grid {
  height: 100px;
  display: grid;
  grid-auto-flow: column; /* 元素按列方向依次排列 */
  grid-auto-columns: max-content; /* 列宽刚好容纳自身内容 */
  gap: 10px;
}

第二步：锁定列宽为固定值 #

Grid的自适应列宽是动态的，内容变化会重新计算宽度。要让尺寸固定，在页面加载完成后，用JS把计算后的实际列宽赋值给Grid：

document.addEventListener('DOMContentLoaded', () => {
  const grid = document.getElementById('grid');
  // 获取所有网格项渲染完成后的实际宽度
  const fixedWidths = Array.from(grid.children).map(item => getComputedStyle(item).width);
  // 将Grid的列宽设置为静态固定值
  grid.style.gridTemplateColumns = fixedWidths.join(' ');
});

这段代码会在DOM加载完成后，读取每个网格项的实际渲染宽度，然后把Grid的列宽替换为这些静态值，后续即使内容变化，列宽也不会再改动。

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