Answer is already here , but i add this one for info about using grid and custom properties.
element can wrap on few rows but will all be the same width, demo below .
var bigW = '0';
for (let e of document.querySelectorAll('.btn')) {
elW = e.offsetWidth;
if (elW > bigW) {
bigW = elW;
}
document.documentElement.style.setProperty("--myW", bigW + 'px');// update column's width //
}
div {
display: grid;
grid-template-columns: repeat(auto-fill, var(--myW)); /* custom properie here to size the columns */
justify-content: center;/* center them for a better visual*/
}
button {
white-space: nowrap; /* we need this */
}
<div>
<button class="btn">some more text </button>
<button class="btn">text </button>
<button class="btn">some bits of text </button>
<button class="btn">Lorem Ipsum</button>
<button class="btn">some loooooonnnng text </button>
<button class="btn">some some text </button>
<button class="btn">some text </button>
<button class="btn">some text </button>
<button class="btn">some text </button>
<button class="btn">some text </button>
<button class="btn">some text </button>
<button class="btn">some text </button>
<button class="btn">some text </button>
<button class="btn">some text </button>
<button class="btn">some text </button>
<button class="btn">some text </button>
</div>
Here is a pen to fork or play with https://codepen.io/gc-nomade/pen/GRJovXZ
DISCLAIMER : requires a browsers that supports CSS Grid Layout and custom properties / CSS variables (--*:value)
https://developer.mozilla.org/en-US/docs/Web/CSS/--*
Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.
support information can be find out at http://caniuse.com
