CSS Grid：如何让容器子元素尺寸自适应在1fr到2fr之间？

要实现Grid容器中第二个子元素在1fr到2fr之间根据内容自动适配，确实无法直接用minmax()（因为它的最小值不支持fr单位），但可以通过将fr转换为基于容器宽度的百分比计算，结合minmax()和fit-content()来实现。

核心思路 #

1. 将1fr和2fr转换为容器宽度的百分比：
   • 当两列比例为1:1时，1fr等价于容器宽度的50%（calc(100% / 2)）
   • 当两列比例为1:2时，2fr等价于容器宽度的66.666%（calc(2 * 100% / 3)）
2. 用minmax()限制第二列的宽度范围：最小为50%（对应1fr），最大为min(66.666%, fit-content(100%))（既不超过2fr的宽度，也不超过内容本身的宽度）

代码示例 #

.grid-container {
  display: grid;
  /* 定义列：第一列占剩余空间的1份，第二列在50%到66.666%之间，且不超过内容宽度 */
  grid-template-columns: 1fr minmax(
    calc(100% / 2), 
    min(calc(2 * 100% / 3), fit-content(100%))
  );
  gap: 1rem; /* 可选：添加列间距 */
}

效果说明 #

• 当第二个子元素的内容宽度小于容器的50%时，列宽自动取50%（对应1fr，保持1:1比例）
• 当内容宽度在容器的50%到66.666%之间时，列宽贴合内容宽度（自适应）
• 当内容宽度超过容器的66.666%时，列宽固定为66.666%（对应2fr，保持1:2比例）

如果需要更灵活的比例调整，只需修改calc()中的数值即可（比如要限制在1fr到3fr之间，就把最大百分比改成calc(3 * 100% / 4)）。

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