[SOLVED] CSS Grid - make next row take 100% width and space items evenly

CSS Grid - make next row take 100% width and space items evenly

I have a list of items in a row. I want each item to take up a minimum width. When the user resizes the screen I want the items to overflow to the next line.

.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>

What I want is for the last row to always take up 100% of the width. Is this doable with CSS Grid?

Ex: If Nine and Ten are overflowing I want the items to span from end to end and be centered.

One Two Three Four Five Six Seven Eight 
          Nine         Ten

or in a tighter space

One Two Three Four 
Five Six Seven Eight 
    Nine   Ten

Solution

CSS grid (read the property out loud) is not the right tool for automating the children's grow.
CSS flex and flex-grow (on the child elements) is — while using CSS wrap

.container {
  resize: both; /* THIS DEMO ONLY! */
  overflow: auto; /* THIS DEMO ONLY! */
  display: flex; /* Don't use "grid" when "flex" is what you need */
  flex-wrap: wrap;   /* Or: flex-flow: row wrap; // children to new line if they overflow */
  background: #eee;
  
  & div {
    flex: 1; /* shorthand for: flex-grow:1; flex-shrink:1; flex-basis:0; */
    outline: 1px solid red;
    text-align: center;
    padding: 1em 2em;
  }
}

Resize the below div to test
<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>