如何在页面空间充足时将Grid网格居中显示？

先看你当前的Grid布局代码：

.content{
display: grid;
grid-template-columns: repeat(auto-fill, 21.25em);
gap: 20px;
justify-content: center;
align-content:center;
align-items:center;
}

问题根源是.content这个Grid容器的宽度默认由子元素内容决定——当页面缩小后，容器宽度会跟着收缩到子元素的总宽度，此时justify-content: center没有多余空间发挥作用，自然就会靠左显示。

常规解决方法（用Grid自身特性即可） #

给.content添加宽度设置，让它占满父容器的可用宽度：

.content{
display: grid;
grid-template-columns: repeat(auto-fill, 21.25em);
gap: 20px;
justify-content: center;
align-content:center;
align-items:center;
width: 100%;
box-sizing: border-box; /* 避免padding/border导致容器溢出父元素 */
}

原理说明 #

• width: 100%让Grid容器占满父元素的可用宽度，此时容器有了足够的剩余空间，justify-content: center就能生效，让内部网格在容器中居中。
• 如果不想让容器在大屏幕上无限拉伸，可以搭配max-width使用，比如max-width: 1200px，这样小屏幕上容器占满宽度实现居中，大屏幕上容器有最大宽度限制，视觉更规整。

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