如何让Grid布局中换行的第三个auto-fill项居中？

直接给你的Grid容器添加以下CSS声明即可：

justify-content: center;

效果说明： #

• 当视口宽度足够容纳三个项目时，三个项目会在一行内居中排列；
• 当视口宽度缩小到无法同时放下三个项目时，第三个项目自动换行到新行，此时由于justify-content: center的作用，它会在新行中居中显示，完全符合你的需求。

如果你的项目有固定宽度，且希望前两个项目在一行时保持按比例分布、仅第三个换行时居中，可以使用以下一行代码（合并多个属性）：

grid-template-columns: repeat(auto-fit, minmax(min(33.333%, 250px), auto)); justify-content: center;

将代码中的250px替换为你项目的实际最小宽度即可，33.333%对应三个项目平分容器宽度的比例。

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