如何用CSS Grid实现左右轨道等宽、取最大min-content，中间占剩余空间？

需求说明 #

需要构建一个三列Grid布局，满足以下要求：

• 左右两侧轨道宽度完全相等
• 左右轨道的最小宽度取两者内容中较大的min-content值
• 中间轨道始终占据剩余空间

现有方案的问题 #

之前尝试的两种写法都无法满足需求：

• grid-template-columns: 1fr auto 1fr;：由于1fr本质等价于minmax(auto, 1fr)，边缘轨道会被压缩至0宽度，中间轨道占据全部空间
• grid-template-columns: minmax(min-content, 1fr) auto minmax(min-content, 1fr);：左右轨道会各自收缩到自身的min-content，导致两侧宽度不等

解决方案 #

通过CSS变量+JS计算结合Grid布局实现需求：先计算左右元素的宽度最大值，将其设为左右轨道的最小宽度，剩余空间由两侧轨道平分。

完整代码 #

CSS

nav {
  display: grid;
  /* 左右轨道最小宽度为计算出的最大值，剩余空间平分 */
  grid-template-columns: minmax(var(--min-edge-width), 1fr) auto minmax(var(--min-edge-width), 1fr);
  background: green;
  align-items: center;
  overflow: hidden;
}

.box {
  box-sizing: border-box;
  overflow: hidden;
}

.scroll-container {
  position: relative;
}

ul {
  display: flex;
  border: 1px solid black;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  overflow-x: auto;
  position: relative;
}

ul li {
  padding: 8px 16px;
  white-space: nowrap;
}

ul li:not(:last-child) {
  border-inline-end: 1px solid black;
}

.edge {
  padding: 8px;
  white-space: nowrap;
}

.right {
  justify-self: end;
}

HTML

<nav>
  <div class="box edge left">
    <h3 class="title">Super Cool App</h3>
  </div>

  <div class="box centre">
    <div class="scroll-container">
      <ul class="links">
        <li>First Link Item</li>
        <li>Second Link Item</li>
        <li>Third Link Item</li>
        <li>Fourth Link Item</li>
        <li>Fifth Link Item</li>
        <li>Sixth Link Item</li>
        <li>Seventh Link Item</li>
        <li>Eighth Link Item</li>
        <li>Ninth Link Item</li>
        <li>Tenth Link Item</li>
      </ul>
    </div>
  </div>

  <div class="box edge right">
    <button>X</button>
  </div>
</nav>

JavaScript

// 计算左右元素的宽度，取最大值作为轨道最小宽度
const leftEl = document.querySelector('.left');
const rightEl = document.querySelector('.right');
const maxEdgeWidth = Math.max(leftEl.offsetWidth, rightEl.offsetWidth);
document.querySelector('nav').style.setProperty('--min-edge-width', `${maxEdgeWidth}px`);

// 窗口大小变化时重新计算，保持布局适配
window.addEventListener('resize', () => {
  const newMaxWidth = Math.max(leftEl.offsetWidth, rightEl.offsetWidth);
  document.querySelector('nav').style.setProperty('--min-edge-width', `${newMaxWidth}px`);
});

效果说明 #

• 左右轨道宽度始终相等，且不会小于两侧元素中较宽的那个的内容宽度
• 窗口宽度足够时，剩余空间由左右轨道平分
• 中间轨道保持自身内容宽度，空间不足时可横向滚动

内容的提问来源于stack exchange，提问作者t.schoel