.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: center;
    flex-direction: column;
}

.container >div{
    border-style: dashed;
    border-width: 1px;
    height: 16%;
}

.item {

    /*width: 12%;*/
    /*height: 14%;*/
    border-style: dashed;
    border-width: 1px;
    text-align: center;
    /*height: calc(100vh / 12);*/
    height: 16%;
    /* This will ensure 12 rows */
}

/*珠盘*/
.zhupan{
    padding-bottom: 45px;
}

.zhupan-row{
    height: 400px;
    width: 60%;
    padding-top: 25px;
}

.item-lie{
    border-style: dashed;
    border-width: 1px;
    text-align: center;
}

.item-lie >div{
    height: 70px;
    width: 70px;
    border-style: dotted none;
    border-width: 1px;
}

/*珠圆*/
.zhuyuan {
    /* 可以调整格子之间的间距 */
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    border-radius: 50%;
}

.zhuyuan1 {
    /* 可以调整格子之间的间距 */
    width: 55px;
    height: 55px;
    line-height: 55px;
    margin: 2.5px auto 2.5px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    border-radius: 50%;
}

.zhunyuan-green{
    background-color: #18a612;
}

.zhunyuan-blue{
    background-color: #2a49ea;
}

.zhunyuan-red{
    background-color: #ff0000;
}