css - 如何在应用了minmax的情况下居中网格内容，以便将推送到新行的元素居中对齐？

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

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

最佳答案

有没有办法将这些项目居中在空列之间的最后一行


我认为不可能通过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>