CSS是網頁設計中常用的樣式表語言。通過CSS，我們可以實現一些非常酷炫的效果，比如九宮格布局。

HTML結構：
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
CSS樣式：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
width: 300px;
height: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.grid-item {
background-color: #f1f1f1;
border: 1px solid #ccc;
text-align: center;
font-size: 30px;
padding: 10px;
}

在HTML中，我們定義了一個class為grid-container的div，里面包含了九個class為grid-item的子元素。而在CSS中，我們對grid-container樣式進行了配置，使其呈現出九宮格布局的樣式。

其中，grid-template-columns和grid-template-rows屬性分別定義了三行三列的等分布局，gap屬性定義了元素之間的間距，width和height屬性定義了九宮格整體的寬度和高度，border和padding屬性則定義了九宮格整體的邊框和內邊距。

對于class為grid-item的子元素，我們只需要定義一些基本的樣式，比如背景顏色、文字居中、字體大小等，就可以實現每個子元素的效果，如下圖所示：