CSS制作朋友圈九宮格是前端開發的一個比較基礎的練習，因為九宮格布局是我們在很多應用場景中都會用到的一個布局。

.grid {
display: flex;
flex-wrap: wrap;
margin: -10px;
}
.grid-item {
width: calc(33.33% - 20px);
margin: 10px;
}
.grid-item img {
width: 100%;
height: 100%;
}

代碼中，我們首先定義了一個名為grid的CSS類，它設置了flex布局，并通過flex-wrap: wrap來讓每個子元素單獨占用一行，實現了九宮格的布局。

接下來，我們定義了名為grid-item的子元素，設置了它們的寬度和外邊距，并利用calc()函數和百分比來實現寬高比例的自適應，同時注意要減去margin的值，避免子元素溢出父容器的情況。

最后，我們還利用了一個img元素作為九宮格子元素的內容，通過設置寬高為100%來讓每張圖片自適應九宮格的大小。

綜上所述，通過以上簡單的CSS樣式代碼，我們就可以快速地實現九宮格布局的效果了。