如何在grid-template-columns中组合repeat、auto-fit与固定宽度列

可以实现，你遇到的问题是Grid自动布局规则没有将最后一个子元素匹配到定义的末尾固定列，只需新增一行指定尾列位置的规则即可解决。

完整实现代码 #

.container {
  grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr)) 50px;
  display: grid;
  grid-gap: 1rem;
  background: beige;
  width: 80%;
  padding: 1rem;
}
/* 核心规则：强制最后一个子元素放在网格最末尾的固定列 */
.container > div:last-child {
  grid-column-end: -1;
}
.container > div {
  background: IndianRed;
  min-height: 5rem;
}

<div class="container">
  <div></div>
  <!-- 中间列数量可以任意增减，都会自动平分剩余空间 -->
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

原理解释 #

你原本的列模板定义已经正确声明了「首列50px、中间自适应列均分、尾列50px」的规则，但是Grid默认的自动布局逻辑会把最后一个子元素放在auto-fit生成的最后一个自适应列之后，不会主动跳到末尾的固定50px列，才会出现末尾空白的问题。
新增的grid-column-end: -1规则中，-1代表网格容器最右侧的列线，指定最后一个子元素结束于最右侧列线，就可以让它自动匹配到你定义的尾固定列。

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