话不多说,直接上代码
<!--
* @Descripttion:
* @Author: qiuyu.cai
* @Date: 2020-09-27 14:51:36
* @LastEditors: qiuyu.cai
* @LastEditTime: 2021-06-18 10:35:09
-->
<div class="container">
<div class="item" style="background: rgb(68, 0, 255); height: 180px;">1</div>
<div class="item" style="background: rgb(251, 255, 0); height: 100px;">2</div>
<div class="item" style="background: rgb(255, 72, 0); height: 110px;">3</div>
<div class="item" style="background: rgb(255, 0, 179); height: 100px;">4</div>
<div class="item" style="background: rgb(30, 255, 0); height: 160px;">5</div>
<div class="item" style="background: rgb(0, 217, 255); height: 180px;">6</div>
</div>
<style>
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 10px;
grid-column-gap: 10px;
border: 1px solid #000;
width: 600px;
margin: auto;
}
.item {
font-size: 30px;
}
</style>
<script>
(function () {
var wrap = document.getElementsByClassName('item');
for (var i = 0; i < wrap.length; i++) {
var lastW = wrap[i].offsetHeight;
console.log(1, lastW)
wrap[i].style.gridRow=`auto / span ${lastW/10+1}`
}
})()
</script>