console
let content2 = document.querySelector('.container')
let list = [1, 2, 3, 4, 5, 6,7,8,9,5,4]
function addItem(dom,arr,rownum){
let length = arr.length
if(length > rownum){
let num = rownum - length % rownum
let arr2 = new Array(num).fill(null)
arr = [...arr,...arr2]
}
arr.forEach(item => {
let itemDom = document.createElement('div')
itemDom.classList.add('item')
itemDom.textContent = item
if(item === null) itemDom.classList.add('notShow')
dom.appendChild(itemDom)
})
}
addItem(content2,list,7)
<div class="container">
</div>
.container {
display: flex;
align-items: center;justify-content: center;
flex-wrap: wrap;
}
.item {
background-color: skyblue;
width: 30px;
height: 30px;
text-align: center;
margin: 15px 15px 0 0;
}
.item:nth-of-type(7n){
margin-right: 0;
}
.notShow{
visibility: hidden;
}