如何用display: grid居中网格容器内的第三个项目？

我在居中容器内的项目时遇到了困难，希望使用display: grid将第三个项目居中对齐。此前尝试使用flexbox实现，但在响应式网站中的表现效果较差。

当前使用的CSS代码：

.projetos {
  flex-direction: column;
  padding: 3rem 3%;
  text-align: center;
  justify-content: center;
}

.projetos-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

.projetos-box img {
  width: 100%;
  max-width: 40rem;
  border-radius: 1rem;
}

HTML代码：

<section class="projetos" id="projetos">
  <h2>Projetos <span>Recentes</span></h2>

  <div class="projetos-container">
    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>

    <div class="projetos-box">
      <img src="https://via.placeholder.com/200.jpg" alt="" width="500">
    </div>
  </div>
</section>

页面效果截图：

要让第三个网格项目居中，可通过以下两种实用方式修改CSS：

方式一：单独指定第三个项目的网格位置 #

直接通过选择器定位第三个项目，让它跨两列并自身居中：

.projetos-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  text-align: center;
}

/* 让第三个项目占据整行并居中 */
.projetos-box:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
}

grid-column: 1 / -1让项目占据整个网格宽度，justify-self: center确保项目自身不会拉伸填满整行，保持原有尺寸居中。

方式二：响应式优先的网格布局 #

如果需要适配不同屏幕尺寸，让布局自动调整列数，可修改网格列的定义：

.projetos-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
  justify-items: center;
}

auto-fit会根据屏幕宽度自动增减列数，屏幕较小时自动切换为单列，第三个项目自然居中；justify-items: center确保所有项目在单元格内居中对齐，兼顾多列场景的布局美观。

另外注意：.projetos类中的flex-direction和justify-content属性无效，因为该元素未设置display: flex，若需要优化标题与容器的垂直布局，可添加display: flex属性。

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