Dynamically center a list of cards without centering the cards CSS

Question

In the code below 5 cards are displayed (the .thumbs), I want to be able to center .thumbs_container in the center of .thumbswrapper to have the cards in the center too, but if I use a "justify-content: center" if 3 cards are displayed on the first line for example on the second the two cards will not be aligned with that of the first line.

.thumbs_wrapper {
    width: 50%;
    background-color: #F6F6F6;
    padding: 56px 50px;
    border-radius: 25px;
}


.thumbs_container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 25px;
    margin: 0 auto;
}

.thumb {
    position: relative;
    background-color: red;
    height: 100px;
    width: 100px;
    border-radius: 10px;
    overflow: hidden;
}

<div class="thumbs_wrapper">
  <div class="thumbs_container">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

Does this answer your question? [Flex-box: Align last row to grid](https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid) — Arleigh Hix, Apr 11 '23 at 17:08

score 0 · Answer 1 · edited Apr 11 '23 at 15:18

0

This will center thumbs_container into thumbs_wrapper

.thumbs_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F6F6F6;
    padding: 56px 50px;
    border-radius: 25px;
}


.thumbs_container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 25px;
    margin: 0 auto;
}

.thumb {
    position: relative;
    background-color: red;
    height: 100px;
    width: 100px;
    border-radius: 10px;
    overflow: hidden;
}

<div class="thumbs_wrapper">
  <div class="thumbs_container">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

edited Apr 11 '23 at 15:18

J4BEZ

374
4
17

answered Apr 11 '23 at 14:33

Gone

111
7

1

You should copy the snippet down here and demonstrate your solution. – isherwood Apr 11 '23 at 14:35
At 330px for example, the squares are not centered relative to .thumbs_wrapper. Ideally .thumbs_container should have a dynamic width based on the maximum number of squares it can display inside .thumbs_wrapper, but I don't believe this is possible. – Apr 11 '23 at 15:59

Dynamically center a list of cards without centering the cards CSS

1 Answers1