vue如何写一个宫格

vue如何写一个宫格

实现一个简单的效果，点击哪个div就让他的边框变红

<div class="test">
            <div
                class="small"
                v-for="(item,index) in list"
                :key="index"
                :class="index===ind?'active':''"   //被激活的div加上active样式
            	@click="cliDiv(item.id)">
            </div>
</div>

data () {
    return {
      list: [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }, { id: 4}],
      ind: 0  //当前的激活索引
    }
},
methods: {
    cliDiv (id) {
      this.ind = id
    }
}

.test{
        width: 1500px;
        height: 400px;
        display: flex;
        .small{
            width: 500px;
            height: 100%;
            border: 2px solid black;
            border-right: none;
            &:last-child{  //less获取最后一个元素要用:last-child
                border-right: 2px solid black;
            }
        }
        .small.active+.small{  // 让激活项的下一个div没有左边框，+表示.active类的下一个.small类
            border-left: none;
        }
        .active{
            border: 2px solid red!important;
        }
    }