Center Align Last Element Of Loop

Introduction

Follow this step to learn how to center align the last element of the loop.

Step 1: Add CSS

Use this CSS to center align the last element of the loop.

/* 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%;
}

---