Fitting elements into a grid in a responsive way - html

Question

Consider a <div> element that contains <button> elements:
<div id="box">
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
...
</div>
I want to fit these elements into a grid pattern, so that
buttons are of equal dimensions and have a fixed minimum width,
a maximal amount of buttons is stacked on each row,
button width is adjusted so that each row is filled completely,
and this behavior persists when #box is resized.
Is there a way to do so using native HTML/CSS features (without using JavaScript)? I tried using the new CSS Flexbox layout:
#box {
display: flex;
width: 500px;
height: 500px;
}
.button {
flex: 1 1 auto;
min-width: 40px;
height: 40px;
}
But this doesn't work..
Thanks for your help!

Answer 1

You can easily use CSS grid layout.
I prefer it over 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>
Here is the codepen.
https://codepen.io/kenanbalija/pen/bYYarj

Answer 2

You can use CSS flex for this, as you suspected.
flex-wrap is what you were missing, as well as using percentages for responsiveness.
#box {
display: flex;
flex-wrap: wrap;
}
#box > * {
flex: 1 0 100px; /* each button should be at least 100px wide */
}
<div id='box'>
<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>