为何CSS Grid出现溢出？百分比布局容器适配问题问询

一、溢出成因：gap是额外空间，不被百分比包含 #

当你设置grid-template-columns: 45% 20% 35%时，三列宽度总和为容器宽度的100%，但Grid的gap属性会在列之间添加额外的固定宽度空间（此处为30px）。3列之间存在2个间隙，总额外宽度为2*30px=60px，因此整个Grid容器的总宽度变为100% + 60px，自然超出父容器的100%宽度限制。

二、为什么分数单位（fr）不会溢出？ #

fr是Grid专属的弹性单位，计算逻辑为：

1. 先从容器总宽度中扣除所有gap的总宽度，得到可用空间
2. 再将可用空间按fr的比例分配给各列

比如使用grid-template-columns: 45fr 20fr 35fr时，总比例为100fr，可用空间是容器宽度 - 60px，每列宽度为可用空间 * (对应fr值/100)，自动预留了gap的空间，因此不会溢出。

三、百分比布局下的解决方法 #

方法1：用calc()手动扣除gap对应空间 #

根据列的比例，从每个百分比宽度中减去该列应承担的gap份额。总gap为60px（2个30px），代码调整如下：

.photo-grid {
  /* 原代码保留，仅修改列宽 */
  grid-template-columns: 
    calc(45% - (60px * 45 / 100)) 
    calc(20% - (60px * 20 / 100)) 
    calc(35% - (60px * 35 / 100));
}

调整后三列宽度总和为100% - 60px，加上gap的60px，总宽度刚好等于容器的100%，不会溢出。

方法2：改用fr单位（推荐） #

直接用分数单位替代百分比，既保留原比例关系，又让Grid自动处理gap的空间分配，无需手动计算：

.photo-grid {
  /* 原代码保留，仅修改列宽 */
  grid-template-columns: 45fr 20fr 35fr;
}

该方法与原百分比比例完全一致，后续调整gap或列比例时无需重新计算，灵活性更高。

方法3：结合minmax与auto-fit（响应式场景适用） #

如果需要在不同屏幕尺寸下自动调整列数，可使用此方法，同时保证gap不溢出：

.photo-grid {
  /* 原代码保留，仅修改列宽 */
  grid-template-columns: repeat(auto-fit, minmax(calc(33.33% - 20px), 1fr));
  /* 3列时总gap为60px，每列平均扣除20px */
}

注意：此方法会改变列的固定比例，适合无需严格遵循45/20/35比例的场景。

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