CSS正方形9宮格圖片是一種常用的網頁布局方式，可以讓網頁看起來更加美觀和規整。下面我們來學習如何使用CSS實現正方形9宮格圖片。

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-image: url('image.jpg');
background-position: center;
background-size: cover;
width: 100%;
height: 0;
padding-top: 100%;
}

以上是實現正方形9宮格圖片的CSS代碼。首先，我們需要創建一個網格容器（grid-container），定義其為網格布局并設置3列和3行，同時設置間距為10像素。然后，我們創建每個網格項（grid-item），設置其背景圖片為要顯示的圖片，并將背景圖居中并填充整個網格項。為了讓網格項變成正方形，我們設置其中的height屬性為0，同時設置padding-top屬性為100%。

通過這樣的CSS代碼，我們就可以輕松地實現一個美觀的正方形9宮格圖片布局。需要注意的是，我們需要將要顯示的圖片替換為自己所需要的圖片，同時也可以根據實際需要調整容器和網格項的寬度和高度等屬性來適應不同的網頁布局。