css 정렬 질문 입니다.

<style>
:root {
    --wrap-height: 30em;
    --wrap-el-gap: 0.2em;
}
* {
    box-sizing: border-box;
}


.wrap {
    background-color: #ededed;
    height: var(--wrap-height);
    display: inline-flex;
    flex-flow: column wrap;
    gap: var(--wrap-el-gap);
}

.wrap .el {
    border: 1px solid #ccc;
    width: 10em;
}
.wrap .el.sz-1 { height: calc(var(--wrap-height) * 0.1); }
.wrap .el.sz-2 { height: calc(var(--wrap-height) * 0.2); }
.wrap .el.sz-3 { height: calc(var(--wrap-height) * 0.3); }
.wrap .el.sz-half { height: calc(var(--wrap-height) * 0.5 - calc(var(--wrap-el-gap) * 0.5)); }
</style>

 

<div class="wrap">
    <div class="el sz-1">1</div>
    <div class="el sz-2">2</div>
    <div class="el sz-3">3</div>
    <div class="el sz-half">4</div>
    <div class="el sz-half">5</div>
    <div class="el sz-3">6</div>
    <div class="el sz-3">7</div>
    <div class="el sz-2">8</div>
    <div class="el sz-1">9</div>
    <div class="el sz-1">10</div>
    <div class="el sz-2">11</div>
    <div class="el sz-1">12</div>
    <div class="el sz-2">13</div>
</div>