align the last element of the grid at horizontal center

align-the-last-element-of-the-grid-at-horizontal-center.css

/* THIS FIRST RULE IS TO CHANGE THE BEHAVIOUR OF THE GRID */
.grid-posts.loop-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


/* THIS SECOND RULE SETS THE SIZE OF EACH ELEMENT PER ROW. PLEASE ADD ONLY THE RIGHT ONE YOU NEED */

/* TWO ELEMENTS PER ROW*/
.grid-posts.loop-grid .grid-col {
    flex: 0 0 48%;
}

/* THREE ELEMENTS PER ROW*/
.grid-posts.loop-grid .grid-col {
    flex: 0 0 31%;
}


/* IF YOU WANT  TO ADD THIS RULE ONLY TO A SPECIFIC LOOP. PLEASE HEAD OVER TO YOUR ADVANCED MOUDULE SETTINGS
AND THEN SET AN ID VALUE FOR YOUR MODULE. AFTER THAT PUT THE CSS RULES INDICATED ABOVE LIKE THIS: */

/* THE FOLLOWING RULES ARE ONLY SPECIFIC TO my-custom-loop ID */
#my-custom-loop .grid-posts.loop-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#my-custom-loop .grid-posts.loop-grid .grid-col {
    flex: 0 0 48%;
}