如何在页面绿色区块中居中多行自适应Grid布局列表？

要让你的Grid列表在绿色section中居中，同时保留自动多行排列的特性，只需通过给父容器添加flex布局来居中Grid容器，不要修改Grid容器本身的display属性（这会导致Grid失效变成单行）。

修改后的CSS代码 #

section {
  background: green;
  /* 添加flex布局让子元素水平居中 */
  display: flex;
  justify-content: center;
  padding: 1rem 0; /* 可选：添加上下内边距，避免内容贴section边缘 */
}

#related-posts ul {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(7.1rem, 100%), 1fr));
  justify-items: center;
  /* 可选：限制ul最大宽度，避免超大屏幕下列数过多 */
  max-width: 1200px;
  width: 100%;
  padding: 0 1rem; /* 可选：左右内边距，避免内容贴屏幕边缘 */
}

#related-posts ul li {
  text-align: center;
  vertical-align: top;
  /* 移除inline-block，Grid子元素无需该属性 */
}

.pthumb img {
  height: 97px;
  width: 129px;
  object-fit: cover;
}

关键说明 #

1. 父容器flex居中：给section设置display: flex和justify-content: center，让内部的列表容器整体水平居中，同时完全保留ul的Grid布局逻辑。
2. Grid特性保留：ul依然使用display: grid，repeat(auto-fill, ...)会根据容器宽度自动调整列数，超出时自动换行成多行，不会因为居中操作失效。
3. 视觉优化：给ul添加width: 100%和max-width，可以在小屏幕上占满宽度，大屏幕上限制最大宽度；内边距能避免内容贴边，提升视觉体验。

修改后，你的Grid列表会在绿色section中水平居中，同时列表项数量超过当前行容纳上限时，会自动换行成多行，完全符合需求。

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