grid布局+css变量实现动态配置列数

思路:若gridItem的数量未知,且需要根据需求配置列的数量,可以使用css变量+js控制css变量的方式实现

html:

<div class="gridBox">
    <div class="gridItem"></div>
    <div class="gridItem"></div>
    <div class="gridItem"></div>
    <div class="gridItem"></div>
    <div class="gridItem"></div>
    <div class="gridItem"></div>
    <div class="gridItem"></div>
    <div class="gridItem"></div>
    <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;
    }
}




// 如果没有使用less或scss:
:root{
    --columnsCount: 3; // 每一行的列数
}

.gridBox {
    display: grid !important;
    /* 将容器分为x列，每列宽度相等 */
    grid-template-columns: repeat(var(--columnsCount), 1fr) !important;
    /* 设置网格之间的间距 */
    gap: 10px;
}

.gridItem {
   max-width: calc(100vw / var(--columnsCount) - 20px) !important;
}

js:

在dom加载事件中为css变量赋值,可以得到我们想要的列数

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

文章有尽头,但知识没有