如何使用css来均匀地布局一些动态显示的按钮？

<div class="button-container">
  <button class="dynamic-button">按钮1</button>
  <button class="dynamic-button">按钮2</button>
  <button class="dynamic-button">按钮3</button>
  <button class="dynamic-button">按钮4</button>
  <button class="dynamic-button">按钮5</button>
</div>

.button-container {
  display: flex;
  justify-content: space-between;
}

.dynamic-button {
  width: 100px;
  height: 40px;
  background-color: #ccc;
  margin-right: 10px; /* 可根据实际需求调整按钮之间的间距 */
}

<div class="button-container">
  <button class="dynamic-button">按钮1</button>
  <button class="dynamic-button">按钮2</button>
  <button class="dynamic-button">按钮3</button>
  <button class="dynamic-button">按钮4</button>
  <button class="dynamic-button">按钮5</button>
</div>

.button-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px; /* 可根据实际需求调整按钮之间的间距 */
}

.dynamic-button {
  height: 40px;
  background-color: #ccc;
}