Render grid items starting from center

Hi all! Just started out playing around with hugo for a personal website and am having some trouble trying to figure out how to get items to render starting from the center.

I’m using the hugo arcana theme and have created a custom html layout page for the highlights partials template so that it essentially is a page for just the blocks. The template page ranges over options in a list and renders each of them as a “highlights” block (which is defined using the partial) within a div row class.

My issue is in trying to get them to populate from the center as opposed to the left. I.e, I have 4 items which is just enough to have 2 rows. Currently it looks like this:

XXX
X

What I want it to do is to populate starting from the center so that it looks like this:

XXX
 X

Is there a parameter I can pass into the range function so that it renders the rows starting from the middle? Or is it something I can populate in the base html code.

Any help is much appreciated