可变列数的宽度未知

Question

我想在列中排列一些项目。我无法预测项目的宽度或高度，也无法预测容器的宽度或高度。我也无法预测可以容纳多少列或列的宽度应该是多少。我希望浏览器在不超过容器宽度的情况下，将项目排列在最大数量的列中，同时最小化容器的高度。

这个解决了问题，但是否有更好的方法？可以不使用jQuery来实现吗？可以以一种老旧浏览器也能正常显示的方式来实现吗（也许将其排列在行中而不是列中）？

<style>
#wrapper {
    column-width: 100px; /* jQuery将更改此值 */
    padding: 20px;
    border: 2px solid blue;
}
.item {
    padding: 50px;
    border: 2px solid green;
}
</style>
<div id="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 获取子元素的最大宽度。
var maxWidth = 0;
jQuery('#wrapper .item').each(function() {
    var width = jQuery(this).outerWidth(true);
        if (width > maxWidth) {
            maxWidth = width;
        }
    });
// 将包装器的列宽度设置为最大宽度。
jQuery('#wrapper').css('column-width', maxWidth + 'px');
</script>

Answer 1

你可以使用网格来实现这个

#wrapper {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 20px;
    grid-template-columns: repeat(9, 1fr);   //将9更改为列数
}