如何用CSS Grid实现5个元素的两行居中布局？

问题需求 #

需要用CSS Grid布局5个元素，分为两行：

• 第一行放置3个元素，呈现 [x]..[x]..[x]
• 第二行放置2个元素并居中对齐，呈现 ...[x]..[x]...

修改后的解决方案 #

核心思路是保持3列的Grid布局，通过选择器定位第二行的两个元素到中间两列，实现居中效果，同时优化容器的适配性。

调整后的CSS代码 #

.month-teas-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 100px auto;
  max-width: 1000px;
}

.month-teas-contentez {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  column-gap: 50px;
  row-gap: 20px;
  width: 100%;
}

/* 定位第二行元素到中间两列 */
.content:nth-child(4) {
  grid-column: 2 / 3;
}

.content:nth-child(5) {
  grid-column: 3 / 4;
}

.content img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

完整HTML代码（无需修改） #

<div class="month-teas-container">
  <div class="month-texts">
    <h2>Tea of the Month</h2>
    <h4>What's Stepping at The Tea Cozy?</h4>
  </div>
  <div class="month-teas-contentez">
    <div class="content">
      <img src="resources\berryblitz.jpg" alt="Fall Berry Blitz Tea">
      <h4>Fall Berry Blitz Tea</h4>
    </div>
    <div class="content">
      <img src="resources\spicedRum.jpg" alt="Spiced Rum Tea">
      <h4>Spiced Rum Tea</h4>
    </div>
    <div class="content">
      <img src="resources\donut.jpg" alt="Seasonal Donuts">
      <h4>Seasonal Donuts</h4>
    </div>
    <div class="content">
      <img src="resources\myrtle.jpg" alt="Myrtle Ave Tea">
      <h4>Myrtle Ave Tea</h4>
    </div>
    <div class="content">
      <img src="resources\bedford.webp" alt="Bedford Bizzare Tea">
      <h4>Bedford Bizzare Tea</h4>
    </div>
  </div>
</div>

关键说明 #

1. 容器适配优化：将.month-teas-container改为flex布局实现整体居中，用max-width替代固定宽度，提升不同屏幕下的适配性。
2. Grid列定位：通过nth-child选择器将第二行的两个元素分别放在Grid的第2、3列，自然形成居中效果。
3. 图片比例控制：添加object-fit: cover确保图片在固定尺寸内保持比例，避免拉伸变形。

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