九宮格是國內(nèi)很流行的一種圖片展示方式，雖然現(xiàn)在我們用手機的時候很少看到這種展示方式了，但是在之前，九宮格還是蠻經(jīng)典的。下面我就跟大家分享一下如何用CSS制作九宮格圖片。

/* HTML代碼 */
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
/* CSS代碼 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
}
.grid-item {
background-image: url("你的圖片地址");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 0;
padding-top: 100%;
}

首先，我們需要在HTML中創(chuàng)建九個div元素，每個元素都添加一個class名為grid-item，這樣我們就可以將CSS樣式應用到每一個元素。

在CSS代碼中，我們使用了網(wǎng)格布局（grid），這里我們將整個容器分為3列，并為每個元素添加了一些間距。我們還將每個元素的背景圖片作為其背景，通過background-size: cover來確保圖片充滿整個元素。

最后，我們通過設置padding-top: 100%來確保元素具有相同的高度和寬度比例。當然，這里的100%可以根據(jù)需要進行修改。

使用CSS創(chuàng)建九宮格圖片非常簡單，只需要設置背景圖片和一些布局樣式即可。希望這篇文章對你有所幫助！