How to center the grid item after wrapping to the next line?

I have got div with 3 nested elements in it. The code of this div is:

.about-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

When the last item wraps to the next row, it is aligned to the start of the grid row but I want him to be centered (as long as it is the only element in grid row), how can I do this? Also how could I set it to take whole width of the row until the next grid item will wrap to the next line?