How to make the columns start from the center of the CSS Grid?

I'm trying to change my Flexbox layout to the new display: grid, And the columns are starting from the left by default.

How do I make them start from the center without specify the grid-column-start like this?

(Just like the align-items: center in the Flexbox)

Is it possible with the display: grid?

Edit: Here are my HTML structure and the 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 the justify-self: center to the columns which I wanted to centered, but the result is not what I expected. (The column doesn't start from the center of the grid.)