使用gird布局实现表格（解决边框重叠问题）

<div class="quickInput">
        <div class="quickInputTable">
            <span class="quickInputTitleStyle">余额快捷输入 (单位：元)</span>
            <div class="box">
                <div class="btn1" v-for="num in btnList" @click="balanceEntry(num)">{{ num }}</div>
            </div>
        </div>
        <div class="btn">
            <el-button type="primary">保存</el-button>
        </div>
    </div>

.box {
    width: 8.75rem;
    height: 2.5rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    grid-row-gap: 2px;
    grid-column-gap: 2px;
    //给整个表格加背景颜色，用于突出gap颜色（灰色）
    background-color: rgb(222, 222, 222);
    border: .025rem solid rgb(222, 222, 222);
}

.btn1 {
    cursor: pointer;
    color: rgb(244, 124, 0);
    font-weight: bold;
    //给item添加白色背景色，用于突出gap颜色（灰色）
    background-color: #fff;
    width: 100%;
    height: 100%;
    //使用flex布局实现居中
    display: flex;
    justify-content: center;
    align-items: center;
}

data() {
        return {
            btnList: [100, 200, 300, 500, 600, 800, 1000, 1500, 2000, 3000, 5000, '未设置', '未设置', '未设置'],
        }
    },