CSS Grid子元素超出父容器宽度问题及固定宽度布局需求

我想用CSS Grid实现如下布局：当父容器宽度无法容纳所有子元素时，子元素自动向下排列。但实际效果却是子元素超出了父容器的设定宽度。（子元素宽度需固定为120px，而非动态宽度）

预期效果：子元素以120px固定宽度排列，父容器宽度不足时自动换行，所有子元素均在容器内。
当前错误效果：子元素横向超出父容器宽度，未自动换行。

我的代码如下：

<div style="width: 50%;">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); grid-gap: 10px;">
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; border: 1px solid blue;">Item</div>
       <div style="width: 120px; background: red; color: #fff; grid-column-start: -1; grid-row-start: -1;">Act</div>
     </div>
</div>

问题原因 #

1. 你设置的grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))会让列宽在120px到等分剩余空间之间动态调整，当容器宽度不足以放下整数个（120px + 间距）的列时，1fr会强制列宽拉伸以填满容器，导致子元素超出设定宽度。
2. 子元素的border:1px solid blue未被包含在width:120px内，实际宽度变为122px，进一步加剧溢出。

修正步骤 #

1. 给所有子元素添加box-sizing: border-box，让边框包含在设定的宽度内。
2. 将网格列模板修改为repeat(auto-fill, 120px)，这样网格会自动计算容器内可容纳的120px列数，不足时自动换行，同时保留间距。
3. 若需要最后一个红色按钮始终位于最后一行的最右侧，可调整其网格定位为grid-column: -2 / -1，或配合grid-auto-flow: dense优化排列。

修正后的代码 #

<div style="width: 50%;">
    <div style="display: grid; grid-template-columns: repeat(auto-fill, 120px); grid-gap: 10px; grid-auto-flow: dense;">
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; border: 1px solid blue; box-sizing: border-box;">Item</div>
       <div style="width: 120px; background: red; color: #fff; box-sizing: border-box; grid-column: -2 / -1;">Act</div>
     </div>
</div>

补充说明 #

• auto-fill会在容器中尽可能多的创建固定宽度的列，多余空间会保留空列；若想折叠空列让子元素填满容器，可改用auto-fit，但此时需要确保子元素宽度能自适应，你的需求是固定宽度，auto-fill更合适。
• grid-auto-flow: dense可以让网格自动填补空白区域，避免最后一行出现不必要的空列。

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