How do I make the columns start from the center of the CSS grid?

I am trying to change my flexbox layout to a new display: grid

one and columns start from the left by default.

How do I get them to start in the center without specifying grid-column-start

how it is?

(Same as align-items: center

Flexbox)

Is this possible with display: grid

?

Edit: Here is my HTML structure and CSS style.

Html

<div class="centered grid">
    <div class="three wide column"></div>
    <div class="two   wide column"></div>
</div>

      

        
        
        
      

    

SASS

.grid
    display              : grid
    grid-template-columns: repeat(12, 1fr)

.grid .column[class*="two wide"]
    grid-column: span 2

.grid .column[class*="three wide"]
    grid-column: span 3

      

        
        
        
      

    

And I also tried to apply justify-self: center

to the columns I would like to center, but the result is not what I expected. (The column does not start at the center of the grid.)