在網頁布局中，九宮格是一個常見的布局方式，它將頁面分為九個等分，方便展示多個內容模塊，而 CSS 是我們控制頁面布局的關鍵工具之一，下面我們來看看如何使用 CSS 控制九宮格的布局。

首先，我們需要創建一個九宮格的 HTML 結構，代碼如下：

<div class="grid-container">
<div class="item item1"></div>
<div class="item item2"></div>
<div class="item item3"></div>
<div class="item item4"></div>
<div class="item item5"></div>
<div class="item item6"></div>
<div class="item item7"></div>
<div class="item item8"></div>
<div class="item item9"></div>
</div>

上面代碼中，我們使用了一個容器 div 和九個 item div 來創建了九宮格的結構。接下來，我們使用 CSS 對九宮格進行布局。

我們首先使用 flex 布局來實現九宮格的等分，代碼如下：

.grid-container {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
}
.item {
width: 33.33%;
height: 33.33%;
}

上面代碼中，我們將 container 設置為 display: flex，并設置了 width 和 height，來控制容器的大小。然后，我們使用 item 的寬度和高度都設置為 33.33%，來實現了九宮格的等分布局。

接下來，我們可以進一步使用 CSS 控制九宮格的樣式、布局和顯示效果，例如：

.item {
border: 1px solid #ccc;
background-color: #f3f3f3;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: #333;
}
.item:hover {
background-color: #ccc;
color: #fff;
}

上面代碼中，我們為 item 設置了邊框、背景色、對齊方式、字體大小和顏色，并且設置了 item 在鼠標懸停時的樣式。

以上就是使用 CSS 控制九宮格的布局和樣式的方法，我們可以根據需要進行自定義和調整，以實現更加豐富、美觀的頁面效果。