隨著網(wǎng)頁設(shè)計(jì)的不斷發(fā)展，越來越多的網(wǎng)站開始嘗試各種不同的排版方式來吸引用戶的眼球。其中，不規(guī)則排列的圖片是一個(gè)特別受歡迎的設(shè)計(jì)方式，可以為網(wǎng)站帶來獨(dú)特的視覺效果。那么，如何用CSS來實(shí)現(xiàn)不規(guī)則排列的圖片呢？下面就來介紹一下。

.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 200px;
grid-gap: 20px;
}
.grid img {
width: 100%;
height: 100%;
object-fit: cover;
}
.grid .item:nth-child(even) {
grid-row: span 2;
}

首先，我們需要使用CSS的Grid布局來實(shí)現(xiàn)圖片的排列。在上面的代碼中，我們使用了grid-template-columns來設(shè)置圖片所在的列數(shù)。使用auto-fill和minmax函數(shù)可以讓布局自適應(yīng)瀏覽器窗口大小，并且設(shè)置了每個(gè)列的最小寬度為200像素，并占據(jù)一等份（1fr）的寬度。

接著，我們也設(shè)置了grid-auto-rows，這樣每一行的高度都是固定的200像素。同時(shí)，我們使用grid-gap來設(shè)置了列和行之間的間距為20像素，以便更好地區(qū)分每一幅圖片。

在設(shè)置好布局之后，我們需要對圖片進(jìn)行樣式處理。在上面的代碼中，我們使用了width和height設(shè)置圖片寬度和高度為100%。同時(shí)，使用了object-fit: cover讓圖片自動填滿所在的格子，保證圖片不變形，達(dá)到最佳顯示效果。

最后，我們對奇偶行設(shè)置不同的高度，來增加圖片的不規(guī)則感。在上面的代碼中，我們對每一項(xiàng)（item）使用:nth-child(even)來選擇偶數(shù)行，并且設(shè)置grid-row: span 2來讓該項(xiàng)的高度為兩行，達(dá)到不規(guī)則效果。

通過這樣的CSS代碼，我們可以很方便地實(shí)現(xiàn)不規(guī)則排列的圖片布局。如果想要自己嘗試一下，可以把上面的代碼copy到自己的項(xiàng)目中，然后在HTML中加入如下代碼：

這樣，就可以在頁面上展示你自己的不規(guī)則圖片排列了，快來試試吧！