title: How to create centered CSS grid with equal width columns?
body: <p>I want to have a menu bar where all menu items have same width (as wide as the widest one is). The number of menu items can vary. The menu should be centered within its container if there is extra space.</p>
  
  <p>Items may wrap on another row if they won't fit on one row, but they should still have the same width. Something like this:</p>
  
  <pre><code>|    [   short   ] [loooooooong] [  between  ]    |
  |    [  wrapped  ]                                |
  </code></pre>
  
  <p>Can I do this with CSS?</p>
  
  <p>I tried with display:grid, but failed:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { 
    border: 1px solid black;
    display:inline-block;
  }
  
  .menu { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, -webkit-max-content));
    grid-template-columns: repeat(auto-fit, minmax(50px, max-content));
    justify-content: center;
    grid-gap: 10px;
    
    background: #eee;
  }
  
  .item { 
    border: 1px solid #aaa;
    background: yellow;
    white-space: nowrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;h2&gt;Two items&lt;/h2&gt;
    
    &lt;p&gt;
      These should have equal widths (as wide as the widest one is) and be centered within the container.
    &lt;/p&gt;
    
    &lt;div class="menu"&gt;
      &lt;div class="item"&gt;Short&lt;/div&gt;
      &lt;div class="item"&gt;Looooooooooong&lt;/div&gt;
    &lt;/div&gt;
    
    &lt;p&gt;
      They are centered all right, but don't have equal widths.
    &lt;/p&gt;
  
    &lt;h2&gt;Three items&lt;/h2&gt;
    
    &lt;p&gt;
      These three should also have same width with each other.
    &lt;/p&gt;
    
    &lt;div class="menu"&gt;
      &lt;div class="item"&gt;First item&lt;/div&gt;
      &lt;div class="item"&gt;Second item&lt;/div&gt;
      &lt;div class="item"&gt;Third&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;p&gt;
      They are centered all right, but don't have equal widths.
    &lt;/p&gt;
    
    &lt;h2&gt;So many items that they won't fit on one line&lt;/h2&gt;
  
    &lt;p&gt;
      These should also have equal widths, but they should wrap to the next row. I don't care whether the second row is centered as long as the items are aligned with the row above.
    &lt;/p&gt;
    
    &lt;div class="menu"&gt;
      &lt;div class="item"&gt;First item&lt;/div&gt;
      &lt;div class="item"&gt;Second item&lt;/div&gt;
      &lt;div class="item"&gt;Third item, a longer one&lt;/div&gt;
      &lt;div class="item"&gt;Fourth item&lt;/div&gt;
      &lt;div class="item"&gt;Fifth item&lt;/div&gt;
      &lt;div class="item"&gt;Sixth item&lt;/div&gt;
      &lt;div class="item"&gt;Seventh item&lt;/div&gt;
      &lt;div class="item"&gt;Eight item&lt;/div&gt;
      &lt;div class="item"&gt;Ninth item&lt;/div&gt;
      &lt;div class="item"&gt;Tenth item&lt;/div&gt;
      &lt;div class="item"&gt;Item number 11&lt;/div&gt;
      &lt;div class="item"&gt;Item number 12&lt;/div&gt;
      &lt;div class="item"&gt;Item number 13&lt;/div&gt;
      &lt;div class="item"&gt;Item number 14&lt;/div&gt;
      &lt;div class="item"&gt;Item number 15&lt;/div&gt;
      &lt;div class="item"&gt;Item number 16&lt;/div&gt;
      &lt;div class="item"&gt;Item number 17&lt;/div&gt;
      &lt;div class="item"&gt;Item number 18&lt;/div&gt;
      &lt;div class="item"&gt;Item number 19&lt;/div&gt;
      &lt;div class="item"&gt;Item number 20&lt;/div&gt;
      &lt;div class="item"&gt;Item number 21&lt;/div&gt;
      &lt;div class="item"&gt;Item number 22&lt;/div&gt;
      &lt;div class="item"&gt;Item number 23&lt;/div&gt;
    &lt;/div&gt;
    &lt;p&gt;
      They have equal widths, but the width is the min width given in minmax and the content doesn't fit within the item.
    &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(the same in CodePen: <a href="https://codepen.io/jarnoan/pen/gxrEpR" rel="nofollow noreferrer">https://codepen.io/jarnoan/pen/gxrEpR</a>)</p>
  
  <p>The question <a href="https://stackoverflow.com/questions/26641652/centered-table-like-layout-with-columns-of-equal-widths-using-css">Centered table-like layout with columns of equal widths using CSS?</a> is similar, but there the number of buttons is fixed and there is no wrapping.</p>
  
  <p>It doesn't need to be display:grid.</p>