html - 如何从中心展开网格内的卡片列表？

Question

我用 CSS 网格创建了一个卡片列表。

如您所见，我的卡片部分从左侧开始扩展。
我想让它从屏幕中心而不是左侧扩展。

这是我本节的代码：

section#our-team {
    grid-column: 1 / -1;
    display:  grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    grid-gap: 30px;
}
.card {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 30px;
}
.card > .card-body {
    margin: 0 auto;
    text-align: center;
}
.card > .card-body > p {
    margin-top: 2px;
    color: #8C8C8C;
    font-size: 12px;
    transition: 0.1s ease-in-out;
}
.card > .card-body > h4 {
    margin-top: 25px;
}
.card > .card-header {
    width: 100%;
    border: 5px solid #414141;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.1s ease;
}

<section id="our-team">
  <div class="card">
    <div class="card-header">
       <img src="images/mahdi fakhr.svg" alt="mahdi                         fakhr" title="mahdi fakhr" />
    </div>
    <div class="card-body">
      <h4 class="mr-0">Mahdi fakhr</h4>
      <p class="mr-0">Product designer</p>
    </div>
  </div>    
</section>

标签： htmlcsscss-grid