如何将应用了minmax的网格内容居中，以使推到新行的项目居中对齐？

Question

我只是想让我的网格布局居中对齐，而不是左对齐。我一直在自动调整和自动填充之间工作，但两者都只是在空白空间中添加额外的列。有没有一种方法可以使空列之间的最后一行的项目居中，或者只是让它们拉伸，这样它们就会填满宽度，而不会添加空列？

HTML

 <section class="affiliates">
        <div class="affiliates-container grid-container">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/1.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/2.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/3.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/4.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/5.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/6.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/7.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/8.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/9.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/10.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/11.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/12.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/13.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/14.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/15.png" alt="">
            <img src="<?php echo get_bloginfo('template_directory'); ?>/img/affiliates/16.png" alt="">
        </div>
    </section>

CSS

.affiliates-container {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 2rem;
  align-items: center;
}

Answer 1

有没有办法使最后一行中的项在空列之间居中

我认为通过css网格是不可能做到这一点的，但它似乎可以通过flexbox来实现。

结果

​

.affiliates-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  width: 200px;
  height: 150px;
  margin-right: 2rem;
  margin-bottom: 2rem;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<section class="affiliates">
  <div class="affiliates-container grid-container">
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
    <div class="item"><img src="https://picsum.photos/536/354" alt=""></div>
  </div>
</section>

​