九宮格布局是網頁設計中非常常見的一種布局方式。實現九宮格布局可以使用HTML和CSS結合的方式，其中HTML用于定義網頁的結構，CSS用于定義網頁的樣式。

以下是HTML的基礎結構：

<div class="grid-container">
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
	<div class="grid-item"></div>
</div>

以上代碼實現了一個帶有9個方格的九宮格布局。接下來是CSS樣式：

.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	padding: 1rem;
}
.grid-item {
	background-color: #ccc;
	height: 10rem;
}

在以上CSS樣式中，grid-template-columns: repeat(3, 1fr); 表示將九宮格分為3列，每列寬度為1fr，即平均分配。grid-gap: 1rem; 表示每個方格之間的間距為1rem。padding: 1rem; 表示九宮格容器的邊距為1rem。.grid-item 中的屬性可以自行定義，這里設置了背景顏色和高度。

運用以上HTML和CSS代碼，就可以實現一個簡單的九宮格布局了。