为什么添加grid gap后网格行元素溢出容器而列元素不会？

差异原因说明 #

核心是块级元素水平、垂直方向的默认尺寸规则不同，叠加Grid轨道百分比的计算逻辑共同导致的：

• 列方向（水平）容器自动扩张：
  你没有给.grid-container设置固定width，块级元素默认width: auto，水平方向下auto宽度的块级元素如果内部内容所需宽度超过父级可用宽度，会自动扩张容纳内容，不会触发溢出。
  你设置的grid-template-columns: repeat(4, 25%)，4列总宽度占满容器宽度，再加上3个20px的列间隙，总内容宽度超过了容器初始的父级继承宽度，浏览器就会自动把容器拉宽到刚好放下所有列和间隙的大小，自然不会溢出。如果要让列方向也出现溢出，只要给容器加width: 100%的固定宽度规则即可复现。
• 行方向（垂直）溢出：
  你显式设置了grid-template-rows: 100px 100px，两行总高度加行间隙共220px，只要你给容器设置了小于220px的固定height，就会触发溢出。如果没有固定高度限制，默认height: auto会自动适配内容高度，不会溢出，可自行检查是否有额外的高度限制规则。

优化建议 #

如果要避免列方向容器扩张，把grid-template-columns: repeat(4, 25%)改为grid-template-columns: repeat(4, 1fr)即可，fr单位会先扣除间隙总宽度再按比例分配剩余空间，不会出现总尺寸超出容器的问题。

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