当前位置：首页 > news >正文

css绘制s型（grid）

news 2024/10/25 17:32:55

在之前有通过flex布局实现了s型布局，是通过截取数组形式循环加载数据
这次使用grid直接加载数据通过css实现
在这里插入图片描述

<div id="app"><template v-for="(item,inx) in items"><div class="row"><template v-for="(ite, index) in item.arr"><div class="row-list" :style="setEvent(index)"><div class="lineBg"><div class="line-title"><div class="box">{{ ite }}</div></div></div></div></template></div></template>
</div>

 new Vue({el: '#app',computed: {setEvent() {return function (index) {// 通过下标得当前是第几行const row = Math.floor(index / this.row) + 1;// 当前行的第几个const rowIndex = index % this.row;if (this.evenRow(index)) {return {// 设置grid属性值gridRowStart: row,gridColumnStart: this.row - rowIndex}}}},},data: {row: 6,items: [{arr: [1, 2, 3, 4, 5, 6]},{arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]},{arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25]},{arr: [1, 2, 3, 4]}],},})

        .row {display: grid;grid-template-columns: repeat(6, 1fr);grid-template-rows: minmax(50px, auto);grid-auto-rows: minmax(50px, auto);grid-gap: 10px;margin-bottom: 10px;text-align: center;}.row-list {border: 1px solid #cccccc;}