CODEWITHSUNDEEP
csscss-grid
gumball
gumball

Reputation: 120

How can I center grid content with minmax applied so items pushed to new line are center-justified?

I would simply like my grid layout to be center justified, as opposed to left justified. I have been working between auto-fit and auto-fill but both just add extra columns to the empty space. Is there a way to either center the items in the last row between the empty columns OR just make them stretch so they fill the width and no empty columns are added?

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

Upvotes: 0

Views: 108

Answers (1)

hisbvdis
hisbvdis

Reputation: 1380

Is there a way to either center the items in the last row between the empty columns

I think it is impossible to do this through the css grid, but it seems to work through flexbox.

Result

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

Upvotes: 1

Related Questions