How to make a centered grid series of items always start with the same alignment regardless of the number of items

Question

This may be a weird question, but I have a series of items that are usually centered on the screen.

All that is fine and well, but when I have less items, they are not aligned with when I have a full row of items. I need all my rows of items to all start at the same alignment regardless of how many there are.

Here is a demo app to illustrate what I mean:

const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
const itemsShortList = [1, 2, 3]
const App = () => {

  return (
  <div>
    <div className='container'>
      <p>This is what I want! The items are all center aligned, but the second column has the same alignment as the first
      despite being shorter
      </p>
      <div className="grid-container">
        {items.map(i => <div key={`container1-${i}`} className='item' style={{ backgroundColor: 'blue'}}/> )}
      </div>
    </div>
    
    <div className='container' style={{ border: '1px solid red'}}>
      <p>This is where the problem lies: if I have less than a full row of items on the grid, it gets centered in the middle, when I want it to be aligned in the same place as if the grid were full.</p>
    
          <div className="grid-container">
        {itemsShortList.map(i => <div key={`container1-${i}`} className='item' style={{ backgroundColor: 'red'}}/> )}
      </div>
    </div>
    
  </div>
  )
}


ReactDOM.render(
    <App />,
    document.getElementById('app')
);

.item {
  min-width: 50px;
  width: 50px;
  height: 50px;
  margin: 5px;
}

.container {
  border: 1px solid blue;
  width: 60%;
  margin: 10px;
  padding: 5px;



}

.grid-container {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, 55px);
  grid-auto-rows: 55px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

So, what do I need to do to keep the items centered as if they were a full row when I don't have enough of those items?