Grid容器无法居中求助：多种尝试方法均未解决

问题分析 #

你的.row网格总宽度（4×180px + 3×10px = 750px）远大于body设置的380px，导致使用justify-content:center时网格项因空间不足被迫垂直堆叠；而place-items:center仅控制网格项内部元素的对齐，无法实现容器本身的居中。

解决方案 #

1. 实现Grid容器水平居中

   • 移除body的固定宽度限制（或调整为足够容纳网格的宽度，比如750px以上），给.row设置max-width并通过margin: 0 auto实现水平居中。
   • 若需要响应式布局，可将grid-template-columns改为repeat(auto-fit, minmax(180px, 1fr))，让网格项自动适配容器宽度。

2. Grid整体向下偏移

   • 给.row添加margin-top属性，设置合适的数值（比如margin-top: 50px）即可实现整体下移。

修改后的完整代码 #

body {
  margin: 10px;
  text-align: center;
  /* 移除固定宽度，让body自适应 */
}

.row {
  display: grid;
  /* 响应式列布局，保持最小180px宽度 */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 10px;
  /* 容器水平居中 + 向下偏移50px */
  max-width: 750px;
  margin: 50px auto 0;
}

.item {
  color: white;
  padding: 1.5em 0;
  font-size: 2em;
  /* 让网格项内部文字居中 */
  display: flex;
  justify-content: center;
}

.a { background: #0d9; }
.b { background: #d90; }
.c { background: #9d0; }
.d { background: #90d; }
.e { background: #d09; }
.f { background: #09d; }
.g { background: #09d; }
.h { background: #09d; }

<div class="row">
  <div class="item a" id="adventureHolidays">
    <p>Adventure Holidays</p>
  </div>
  <div class="item b" id="backpacking">
    <p>Backpacking</p>
  </div>
  <div class="item c" id="cruiseHolidays">
    <p>Cruise Holidays</p>
  </div>
  <div class="item d" id="eventTravel">
    <p>Event Travel</p>
  </div>
  <div class="item e" id="packageHoliday">
    <p>Package Holiday</p>
  </div>
  <div class="item f" id="safari">
    <p>Safari</p>
  </div>
  <div class="item g" id="skiingAndSnowboarding">
    <p>Skiing and Snowboarding</p>
  </div>
  <div class="item h" id="volunteering">
    <p>Volunteering</p>
  </div>
</div>

补充说明 #

如果必须保留4列固定布局，只需将.row的grid-template-columns改回180px 180px 180px 180px，同时给body设置width: 750px（或更大）即可。

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