html - 以响应方式将元素装入网格

Question

考虑一个 <div>包含 <button> 的元素元素:

<div id="box">
    <button class="button">1</button>
    <button class="button">2</button>
    <button class="button">3</button>
    ...
</div>

我想将这些元素放入一个网格模式中，这样

1. 按钮具有相同的尺寸并具有固定的最小宽度，
2. 最大数量的按钮堆叠在每一行上，
3. 调整按钮宽度，使每一行都被完全填充，
4. 并且此行为在 #box 时持续存在调整大小。

有没有办法使用原生 HTML/CSS 功能(不使用 JavaScript)做到这一点？我尝试使用新的 CSS Flexbox 布局:

#box {
    display: flex;
    width: 500px;
    height: 500px;
}

.button {
    flex: 1 1 auto;
    min-width: 40px;
    height: 40px;
}

但这行不通..

感谢您的帮助!

Answer 1

您可以轻松地使用 CSS 网格布局。我更喜欢它而不是 flexbox。

<div id='grid'>
      <button class='button'>1</button>
      <button class='button'>2</button>
      <button class='button'>3</button>
      <button class='button'>4</button>
      <button class='button'>5</button>
      <button class='button'>6</button>
      <button class='button'>7</button>
      <button class='button'>8</button>
      <button class='button'>9</button>
      <button class='button'>10</button>
      <button class='button'>11</button>
      <button class='button'>12</button>
      <button class='button'>13</button>
      <button class='button'>14</button>
      <button class='button'>15</button>
      <button class='button'>16</button>
</div>

<style>
  #grid {
    display: grid;
    grid: 50px / auto-flow;
  }
</style>

这是代码笔。

https://codepen.io/kenanbalija/pen/bYYarj