用css grid实现网格布局

样式

可以根据自己的需求改

<style>
    .containerd{
        display: grid;
        grid-template-rows: repeat(5, 80px);总共有5列
        grid-template-columns: repeat(12, 100px);//一行显示12个
        grid-row-gap: 40px;//每个的间隔为40
        grid-column-gap: 40px;
    }
    .itemd {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #fff;
        border-radius: .2rem;
        font-size: .8em;
        min-height: 3rem;
        padding: .75rem;
        color: #0F0F0C;
        background-color: #25f3a8
    }
  </style>

按照自己的需求引入自己想要的

<div id="bvd" class="containerd"><div class='itemd'>1</div></div>