1.使用display: flex;将Container转换为flexbox
1.使用flex-wrap: wrap允许中断到新行
1.计算元素的宽度以创建2列布局以考虑差距
1.在flex-container上使用justify-content: center将项目居中

:root {
  --gap: 2rem;
}

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

.projetos-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap) ; 
  justify-content: center;
}

.projetos-box {
  width: calc((100% - var(--gap)) / 2);
}

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

<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>

您可以欺骗它并使用transform，但需要检查几件事。

• 这是一个人站在一排吗？（奇数位置）
• 这是最后一个吗
• 如果两者都是，则将其自身宽度的50%+（对于2col）差距设置的一半移动到旁边。

但这基本上是一个灵活的工作，我会说：）
下面是一些测试来证明这个想法，不要介意你有多少孩子在你的网格。

.projetos {
  flex-direction: column;
  padding: 3rem 3%;
  text-align: center;
  justify-content: center;
  /* show me center */
  background:linear-gradient(to left,ivory 50%, silver 50%);
}

.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;
}

/* trick me */
.projetos-box:nth-child(odd):last-child {
  transform: translatex(calc(50% + 1rem));
}

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

如果你不喜欢这个变换技巧，那么把最后一个奇数元素跨越两列，并给予一个自动边距。