現(xiàn)在，我們經(jīng)常在網(wǎng)站上看到一種排版效果，叫做自適應列數(shù)瀑布流。

所謂自適應列數(shù)瀑布流，就是在一個寬度固定的容器內(nèi)，自動適應調(diào)整列數(shù)，并且讓每一列的內(nèi)容高度自適應，實現(xiàn)瀑布流效果。

那么，CSS如何實現(xiàn)自適應列數(shù)瀑布流呢？下面我們來看一個實現(xiàn)方法：

/* 設置容器寬度和列間距 */
.container {
width: 1000px;
margin: 0 auto;
column-gap: 20px;
}
/* 設置列寬和內(nèi)容邊距 */
.item {
width: calc(33.33% - 6.67px);
margin-bottom: 20px;
padding: 10px;
break-inside: avoid;
display: inline-block;
vertical-align: top;
}
/* 設置響應式樣式 */
@media screen and (max-width: 768px) {
.item {
width: 50%;
}
}
/* 設置列高自適應 */
.item > * {
margin-bottom: 10px;
}
.item img {
display: block;
max-width: 100%;
}

上面的代碼中，我們使用了CSS3的column屬性來控制容器內(nèi)列數(shù)，并且設置了列間距。

在設置每一列的樣式時，我們使用了inline-block屬性，并且設置了列寬和內(nèi)容邊距。

而在響應式布局中，我們使用了媒體查詢@media來改變列的寬度。

最后，設置了每一列內(nèi)容的邊距和圖片的寬度自適應。

通過上面的代碼，我們就能夠?qū)崿F(xiàn)一個自適應列數(shù)瀑布流的效果了。