一个响应式布局的实现，不同宽度放置的元素个数是不同的

主体{最小宽度：1024像素；}.item2-wrapper{/*元素数量*/--count_number:4;/*每个元素的宽度*/--width:200px;/*每个元素的高度*/--height:200px;/*列间距*/--col-gap:20px;/*行间距*/--row-gap:20px;/*容器元素居中*/margin:0auto;/*容器元素宽度，元素宽度*数量+列间距*(number-1)*/width:calc(var(--width)*var(--count_number)+var(--col-gap)*(var(--count_number)-1));背景色：古董白；}.item-ul-2{列表样式类型：无；-webkit-填充开始：0；/*解决html不连续写入导致浏览器渲染有间隙的问题*/font-size:0;/*补充第一行和最后一行的顶部和底部边距*/padding:calc(var(--row-gap)/2)0;/*宽度为宽度*数字+列间距*数字*/width:calc(var(--width)*var(--count_number)+var(--col-gap)*var(--count_number));/*调整ul容器的位置，使其居中*/margin:0calc(var(--col-gap)/2*-1);}.item-li-2{宽度：var(--width);高度：var(--height)；/*设置元素的上下左右间距*/margin:calc(var(--row-gap)/2)calc(var(--col-gap)/2);字体大小：14px;背景色：#00ffff33；显示：内联柔性；证明内容：居中；对齐项目：居中；/*设置对齐位置，先把这一行注释掉看看效果*/vertical-align:middle;}functionhandleClick(number,elementId){varcurrentStyle=document.getElementById(elementId)//这里获取的值是字符串格式varcurrentNumber=currentStyle.style.getPropertyValue('--count_number')if(currentNumber!==number+''){currentStyle.style.setProperty('--count_number',number)}}//可以加节流（N毫秒内执行一次）或者防抖（事件停止N毫秒后执行）来减少触发次数window.onresize=function(){//获取可视区域宽度varwidth=document.documentElement.clientWidthif(width<1366){handleClick(3,'wrapperId')}else{handleClick(4,'wrapperId')}}在线示例