html - 너비가 동일한 열을 사용하여 중앙 CSS 그리드를 만드는 방법은 무엇입니까?

모든 메뉴 항목의 너비가 가장 넓은 메뉴 표시 줄을 원합니다 (가장 넓은 너비). 메뉴 항목의 수는 다를 수 있습니다. 공간이 더 있으면 메뉴가 컨테이너 중앙에 있어야합니다.

항목이 한 행에 맞지 않으면 다른 행으로 줄 바꿈 될 수 있지만 여전히 같은 너비를 가져야합니다. 다음과 같은 것 :

|    [   short   ] [loooooooong] [  between  ]    |
|    [  wrapped  ]                                |

CSS로이 작업을 할 수 있습니까?

display : grid로 시도했지만 실패했습니다 :

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

<div class="container">
  <h2>Two items</h2>
  
  <p>
    These should have equal widths (as wide as the widest one is) and be centered within the container.
  </p>
  
  <div class="menu">
    <div class="item">Short</div>
    <div class="item">Looooooooooong</div>
  </div>
  
  <p>
    They are centered all right, but don't have equal widths.
  </p>
  <h2>Three items</h2>
  
  <p>
    These three should also have same width with each other.
  </p>
  
  <div class="menu">
    <div class="item">First item</div>
    <div class="item">Second item</div>
    <div class="item">Third</div>
  </div>
  <p>
    They are centered all right, but don't have equal widths.
  </p>
  
  <h2>So many items that they won't fit on one line</h2>
  <p>
    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.
  </p>
  
  <div class="menu">
    <div class="item">First item</div>
    <div class="item">Second item</div>
    <div class="item">Third item, a longer one</div>
    <div class="item">Fourth item</div>
    <div class="item">Fifth item</div>
    <div class="item">Sixth item</div>
    <div class="item">Seventh item</div>
    <div class="item">Eight item</div>
    <div class="item">Ninth item</div>
    <div class="item">Tenth item</div>
    <div class="item">Item number 11</div>
    <div class="item">Item number 12</div>
    <div class="item">Item number 13</div>
    <div class="item">Item number 14</div>
    <div class="item">Item number 15</div>
    <div class="item">Item number 16</div>
    <div class="item">Item number 17</div>
    <div class="item">Item number 18</div>
    <div class="item">Item number 19</div>
    <div class="item">Item number 20</div>
    <div class="item">Item number 21</div>
    <div class="item">Item number 22</div>
    <div class="item">Item number 23</div>
  </div>
  <p>
    They have equal widths, but the width is the min width given in minmax and the content doesn't fit within the item.
  </p>
</div>

(CodePen과 동일 : https://codepen.io/jarnoan/pen/gxrEpR)

질문 중심 테이블 모양 레이아웃 CSS를 사용하여 너비가 같은 열을 사용합니까? 는 비슷하지만 버튼 수가 고정되어 있고 줄 바꿈이 없습니다.

표시 : 그리드 일 필요는 없습니다.