CSS 순수 CSS로 3단 폭포수(Waterfall) 레이아웃 만들기
페이지 정보
조회 132회
작성일 23-09-01 17:06
JavaScript 없이 순수 CSS만으로 3단 폭포수(벽돌형) 레이아웃을 구현하는 방법이다. column-count: 3으로 콘텐츠를 3개 열로 나누고 break-inside: avoid를 적용해 항목이 잘리지 않게 하거나, grid 템플릿과 함께 사용해 높이가 서로 다른 이미지·카드가 자연스럽게 채워지도록 배치하는 HTML·CSS 예제를 제공한다.
.container {
display: flex;
flex-flow: column wrap;
align-content: space-between;
/* 容器必须有固定高度
* 且高度大于最高的列高 */
height: 660px;
/* 非必须 */
background-color: #f7f7f7;
border-radius: 3px;
padding: 20px;
width: 60%;
margin: 40px auto;
counter-reset: items;
}
.item {
width: 32%;
/* 非必须 */
position: relative;
margin-bottom: 2%;
border-radius: 3px;
background-color: #a1cbfa;
border: 1px solid #4290e2;
box-shadow: 0 2px 2px rgba(0,90,250,0.05),
0 4px 4px rgba(0,90,250,0.05),
0 8px 8px rgba(0,90,250,0.05),
0 16px 16px rgba(0,90,250,0.05);
color: #fff;
padding: 15px;
box-sizing: border-box;
}
/* 仅用于打印数字 */
.item::before {
counter-increment: items;
content: counter(items);
}
/* 将内容块重排为3列 */
.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n) { order: 3; }
/* 强制换列 */
.container::before,
.container::after {
content: "";
flex-basis: 100%;
width: 0;
order: 2;
}<div class="container">
<div class="item" style="height: 140px">1</div>
<div class="item" style="height: 190px">2</div>
<div class="item" style="height: 170px">3</div>
<div class="item" style="height: 120px">4</div>
<div class="item" style="height: 160px">5</div>
<div class="item" style="height: 180px">6</div>
<div class="item" style="height: 140px">7</div>
<div class="item" style="height: 150px">8</div>
<div class="item" style="height: 170px">9</div>
<div class="item" style="height: 170px">10</div>
</div>