CSS中，我們可以非常方便地通過布局技巧，實現九宮格等多種頁面布局。下面，我將一步步地介紹如何使用CSS寫出九宮格。

/* 定義外層容器樣式 */
.container {
width: 300px;
height: 300px;
display: flex;
flex-wrap: wrap; /* 元素自動換行 */
}
/* 定義每個格子的樣式 */
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
box-sizing: border-box; /* 邊框不會增加元素尺寸 */
}
/* 定義不同位置的樣式 */
.box:nth-child(1),
.box:nth-child(2),
.box:nth-child(3) {
border-top: none; /* 第一行頂部無邊框 */
}
.box:nth-child(1),
.box:nth-child(4),
.box:nth-child(7) {
border-left: none; /* 第一列左邊無邊框 */
}
.box:nth-child(3),
.box:nth-child(6),
.box:nth-child(9) {
border-right: none; /* 第一列右邊無邊框 */
}
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9) {
border-bottom: none; /* 最后一行底部無邊框 */
}

在上面的代碼中，我們首先定義了一個外層容器，使用了flex布局，并設置了寬高為300px，這樣就能容納下九個100x100的格子。同時，我們還設置了自動換行，這樣，當格子數量超過9個時，就會自動換行。

接下來，我們定義了每個格子的樣式，設置了寬高和邊框。注意，我們設置了box-sizing為border-box，這樣，在添加邊框時，元素的實際尺寸不會發生改變。

最后，我們使用nth-child選擇器，為第一行、第一列、最后一行、最后一列的元素設置了不同的樣式，使得它們不會出現多余的邊框。

通過以上的CSS樣式定義，我們就能輕松地實現九宮格布局，同時也展示了CSS靈活的樣式選擇能力。