Centered three column grid of cards in CSS

Question

I have product cards that are displayed throughout the cycle:

{% for product in products %}
                
        <div class="card">
                <div class="card__top">    
                        <img src="" alt="product img"/>
                </div>
                <div class="card__bottom">
                <div class="card__prices">
                        <div class="card__price card__price--common">Бесплатно</div>
                </div>
                <p>
                        {{ product.name}}
                </p>
                <button class="card__add">Подробнее</button>
                </div>
        </div>
        
{% endfor %}

Example:

<div class="card">
  <div class="card__top">
    <img src="" alt="product img" />
  </div>
  <div class="card__bottom">
    <div class="card__prices">
      <div class="card__price card__price--common">Бесплатно</div>
    </div>
    <p>
      Product 1
    </p>
    <button class="card__add">Подробнее</button>
  </div>
</div>

<div class="card">
  <div class="card__top">
    <img src="" alt="product img" />
  </div>
  <div class="card__bottom">
    <div class="card__prices">
      <div class="card__price card__price--common">Бесплатно</div>
    </div>
    <p>
      Product 2
    </p>
    <button class="card__add">Подробнее</button>
  </div>
</div>

<div class="card">
  <div class="card__top">
    <img src="" alt="product img" />
  </div>
  <div class="card__bottom">
    <div class="card__prices">
      <div class="card__price card__price--common">Бесплатно</div>
    </div>
    <p>
      Product 3
    </p>
    <button class="card__add">Подробнее</button>
  </div>
</div>

Now the cards are displayed in 1 column, and they are pressed to the right edge. How can I make them appear in a 3-column grid and be centered? If you need more information, I'm ready to provide it. I will be glad for any help.

Michael M. · Accepted Answer · 2023-04-02T15:22:50.597

Try creating a parent <div> flexbox (with display: flex;), then setting justify-content: center; to center the items. You can also add some margin on the children to make it less squished together:

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

.card {
  margin: 10px;
}

<div class="card-container">
  <div class="card">
    <div class="card__top">
      <img src="" alt="product img" />
    </div>
    <div class="card__bottom">
      <div class="card__prices">
        <div class="card__price card__price--common">Бесплатно</div>
      </div>
      <p>
        Product 1
      </p>
      <button class="card__add">Подробнее</button>
    </div>
  </div>

  <div class="card">
    <div class="card__top">
      <img src="" alt="product img" />
    </div>
    <div class="card__bottom">
      <div class="card__prices">
        <div class="card__price card__price--common">Бесплатно</div>
      </div>
      <p>
        Product 2
      </p>
      <button class="card__add">Подробнее</button>
    </div>
  </div>

  <div class="card">
    <div class="card__top">
      <img src="" alt="product img" />
    </div>
    <div class="card__bottom">
      <div class="card__prices">
        <div class="card__price card__price--common">Бесплатно</div>
      </div>
      <p>
        Product 3
      </p>
      <button class="card__add">Подробнее</button>
    </div>
  </div>
  <div class="card">
    <div class="card__top">
      <img src="" alt="product img" />
    </div>
    <div class="card__bottom">
      <div class="card__prices">
        <div class="card__price card__price--common">Бесплатно</div>
      </div>
      <p>
        Product 4
      </p>
      <button class="card__add">Подробнее</button>
    </div>
  </div>
  <div class="card">
    <div class="card__top">
      <img src="" alt="product img" />
    </div>
    <div class="card__bottom">
      <div class="card__prices">
        <div class="card__price card__price--common">Бесплатно</div>
      </div>
      <p>
        Product 5
      </p>
      <button class="card__add">Подробнее</button>
    </div>
  </div>
  <div class="card">
    <div class="card__top">
      <img src="" alt="product img" />
    </div>
    <div class="card__bottom">
      <div class="card__prices">
        <div class="card__price card__price--common">Бесплатно</div>
      </div>
      <p>
        Product 6
      </p>
      <button class="card__add">Подробнее</button>
    </div>
  </div>
</div>

Here's with your templating:

<style>
    .card-container {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .card {
      margin: 10px;
    }
</style>
<!-- ... -->
<div class="card-container">
    {% for product in products %}
                    
            <div class="card">
                    <div class="card__top">    
                            <img src="" alt="product img"/>
                    </div>
                    <div class="card__bottom">
                    <div class="card__prices">
                            <div class="card__price card__price--common">Бесплатно</div>
                    </div>
                    <p>
                            {{ product.name}}
                    </p>
                    <button class="card__add">Подробнее</button>
                    </div>
            </div>
            
    {% endfor %}
</div>

this worked until I was outputting less than 5 cards, after I started to output more, they began to stick together and decrease in size. how can i fix this so that it works for any number of cards? (because my database will be constantly updated) — Глеб Гудалин, Apr 02 '23 at 15:05
@ГлебГудалин Try adding `flex-wrap: wrap` to the card container's CSS. With that, the columns should wrap onto the next line/below rather than gets squished together. — Michael M., Apr 02 '23 at 15:23
thanks, now a maximum of 6 cards is displayed in a row. Is there a way to set the limit to 5? — Глеб Гудалин, Apr 02 '23 at 16:06
@ГлебГудалин There isn't any super easy way to do that with flexbox. You could either try increasing the margins (IMO the easier way), or you could use some `flex-grow`/`flex-basis` hackery (more on that [here](https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row)). — Michael M., Apr 02 '23 at 16:20

Centered three column grid of cards in CSS

1 Answers1