How to center items within css grid columns?

pen view: https://codepen.io/peter952001/pen/wvqrKwR

I am a beginner in CSS and trying to build a blog website (using Django) from scratch. I wanted to make cards responsible for each blog post on the home page like this

<div class="container">
    <div class="card-wrapper">
        <div class="card">
        <!-- Some post info -->
        </div>
    </div>
</div>

However, I am not able to make the cards centred according to their number (max is 5 per row). So, as in the pen view, I want the three cards to be centred, and if another post is added, the four get centred accordingly. Here is the css:

.card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: 10px;
    align-items: center;
    justify-content: space-around;
}
.card {
    height: 520px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: #fff;
    transition: all 0.5s ease;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    overflow: hidden
}

I think the problem is in the grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); line but I don’t know how to fix it. Thanks for help.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You are right. The problem is in the grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); line.
you can change it from absolute value to relative value. like that:

grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));

.container {
    min-height: 80vh;
    padding: 20px 0;
    display: flex;
}
.card-wrapper {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr ));
    grid-gap: 10px;
    align-items: center;
    justify-content: space-around;
}

Method 2

add to card-wrapper

margin: 0 auto;

add to container *edit

display: flex;

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0