Check out the Vue code snippet below:
<template>
<div class="live-room-list">
<div class="test">
<div
class="item"
v-for="(item, index) in list"
:key="item.height"
:style="{
'grid-row': `span ${Math.ceil(item.height)}`
}"
>{{index+1}}: {{item.height}}</div>
</div>
</template>
<script>
export default {
data() {
return {
list: Array.from({ length: 10 }).map(_ => {
return {
height: Math.random() * 300 + 10
};
})
};
}
};
</script>
<style lang="scss" scope>
.test {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0 5px;
grid-auto-flow: row dense;
grid-auto-rows: 1px;
}
.item {
border: 2px solid rgb(226, 199, 77);
}
</style>
When I specify a small value for length, everything works fine. However, if length is set to a large number, the cells start to overlap like this:
What could be causing this issue?
I've tried searching on Google for similar cases but couldn't find any relevant explanation.