动态按列数布局

思路：根据后台返回列数，动态布局选项，用display: grid网格布局，将容器分为等宽列数去实现

html布局

<div class="gridBox">
    <div class="gridItem"></div>
    <div class="gridItem"></div>
</div>

css样式

.gridBox {
    // 每一行的列数
    --columnsCount: 3; 
    //网格布局
    display: grid !important;
    /* 将容器分为x列，每列宽度相等 */
    grid-template-columns: repeat(var(--columnsCount), 1fr) !important;
    /* 设置网格之间的间距 */
    gap: 10px;
 
    .gridItem {
        //选项最大宽度
        max-width: calc(100vw / var(--columnsCount) - 20px) !important;
    }
}

js 动态设置列数

const gridBox = document.querySelector('.gridBox');
gridBox.style.setProperty('--columnsCount', '4');

 参考grid布局+css变量实现动态配置列数-CSDN博客