CSS Grid - сделать следующую строку шириной 100% и равномерно распределить элементы

У меня есть список элементов подряд. Я хочу, чтобы каждый элемент занимал минимальную ширину. Когда пользователь изменяет размер экрана, я хочу, чтобы элементы перетекали на следующую строку.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  align-items: center;
}

div {
  text-align: center;
}

<div class = "container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

Я хочу, чтобы последняя строка всегда занимала 100% ширины. Возможно ли это с помощью CSS Grid?

Пример: Если Nine и Ten переполнены, я хочу, чтобы элементы располагались от начала до конца и были центрированы.

One Two Three Four Five Six Seven Eight 
          Nine         Ten

или в более тесном пространстве

One Two Three Four 
Five Six Seven Eight 
    Nine   Ten