How to create cards with a center alignment for full line and left for the non full line?

I use ElectronJs which is a framework "to develop web on dekstop"... I try to make an app with cards like bootstrap can do but I want many cards then when I change the size of my window I want that my cards move (responsive), I try many things in css(flexbox, grids...) but I can't succeed to do what I want, below you can see two pictures that will help you to understand what I want to do because it's more meaningful :D

There is a screenshot of what I have succeed to do:

And a draw of what I want to do (sorry for the drawing quality :D):

HTML:

<div class="part-central">
        <div class="part-primary">
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
            <div class="ltlpart-color"></div>
        </div>
    </div>

CSS (PS: I use sass):

/* -------------------------------------------------------------------------- */
/*                                   CENTRAL                                  */
/* -------------------------------------------------------------------------- */
.part-central {
    background-color: #181818;
    height: 100%;
}

/* -------------------------------------------------------------------------- */
/*                                   PRIMARY                                  */
/* -------------------------------------------------------------------------- */
.part-primary {
}

/* ---------------------------- little part color --------------------------- */
.ltlpart-color {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 10px;
    border: red solid 6px;
    border-radius: 10px;
}

I hope I've been clear, I apologize if that's not the case. Thanks you very much for your help !