css 정렬 질문 입니다.
본문
아래 형태의 레이아웃으로 display 시킬려면 css 어떻게 해야 될까요?
답변 2
다음 코드가 도움이 될지 모르겠습니다.
<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>
답변을 작성하시기 전에 로그인 해주세요.
