CSS grid布局如何优雅实现中间单元格占满剩余可用空间

你可以使用grid-template-columns: auto 1fr auto的标准写法实现需求，完全不需要用1000fr这类hack方案：

.post {
  display: grid;
  gap: 2rem;
  /* 左右列按内容自适应宽度，中间列占满剩余全部空间 */
  grid-template-columns: auto 1fr auto;
}

原来的.post div:nth-child相关的grid-area指定代码可以全部删除，网格布局会自动把三个子元素按顺序排列到三个列中。

方案说明 #

• 列宽值为auto时，会根据该列的内容自动计算宽度，刚好适配序号、日期这类固定内容的展示需求，不会出现内容被压缩或者空间浪费的问题
• 列宽值为1fr时，会占据容器扣除所有非fr宽度列之后的全部剩余空间，正好满足你要中间单元格占满最大可用空间的要求

如果需要给左右列预留固定的最小宽度，避免内容过窄时布局错乱，也可以用minmax做限制：

.post {
  display: grid;
  gap: 2rem;
  /* 左右列最小宽度50px，最大不超过内容宽度，中间列占满剩余空间 */
  grid-template-columns: minmax(50px, auto) 1fr minmax(50px, auto);
}

你之前用1fr 1000fr 1fr的实现属于非正规的hack写法，语义不明确，后续维护时其他开发者很难快速理解写法的作用，用上面的标准写法是grid布局下实现两侧自适应、中间撑满布局的最佳实践，兼容所有现代浏览器。

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