如何用CSS Grid实现1-3列可变等宽列搭配固定宽度列的布局

没问题，这个需求用CSS Grid完全能搞定，不用额外套flexbox，我给你直接上可行的方案，简单又靠谱！

你的核心需求是「1-3个可变列平分剩余空间 + 右侧两个固定宽度列」，而且整个grid是固定宽度的，那CSS Grid里用repeat(auto-fit, minmax(0, 1fr))就能完美解决，不用复杂的动态CSS生成。

先看修改后的完整代码：

JSP结构（完全不用改） #

<div class="grid-div">
  <%-- A list of items, will be from 1-3 --%>
  <c:forEach items="${itemList}" var="item">
    <div>${item.info}</div>
  </c:forEach>
  <div>Checkboxes here</div>
  <div>Buttons here</div>
</div>

CSS样式（核心修改） #

.grid-div {
  display: grid;
  gap: 5px;
  /* 这里填你实际的固定宽度，比如800px，或者设为100%继承父容器的固定宽度 */
  width: 800px;
  /* 核心写法：自动适配可变列数量，平分剩余空间，后面跟固定列 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) 120px 100px;
}

/* 可选但推荐：防止可变列内容过长撑开列，严格保证等宽效果 */
.grid-div > div:not(:nth-last-child(1)):not(:nth-last-child(2)) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

我给你拆解一下关键逻辑：

• repeat(auto-fit, minmax(0, 1fr)) 是灵魂：auto-fit会自动识别你JSP渲染出来的1-3个可变列，给每个列分配1fr的空间——1fr的计算逻辑是「总宽度减去两个固定列的宽度」后平分，不管是1个、2个还是3个可变列，都会自动等宽。
• 加minmax(0, 1fr)是踩过坑的经验：如果可变列的内容很短（甚至为空），不加这个的话，列可能不会严格平分剩余空间；配合子元素的min-width: 0和overflow设置，还能避免内容过长把列撑变形，死死守住等宽的规则。
• 后面的120px 100px就是你要的固定宽度列，稳稳固定在最右侧，不受左侧可变列的影响。

最后补个小提示：如果你的grid不是写死固定宽度，而是要占满父容器的固定宽度（比如父容器是width: 1000px），那把.grid-div的width改成100%就行，效果完全一致。

内容来源于stack exchange