CSS九宮格拼圖是一種常見的網頁布局方式，通過使用CSS對元素進行布局和定位，實現頁面不同區域之間的相對位置關系。

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
padding: 10px;
}
.item {
background-color: #007bff;
color: #fff;
text-align: center;
font-weight: bold;
}
.item:nth-child(5) {
grid-column: 1/3;
grid-row: 2/4;
}
.item:nth-child(6) {
grid-column: 3/4;
grid-row: 3/4;
}

上述代碼中，我們首先設置了一個class為container的元素為網格布局，通過grid-template-columns和grid-template-rows來定義行數和列數，gap用于設置元素之間的距離。接下來，我們使用class為item的元素來填充網格，設置其背景顏色、字體顏色、文本居中以及字體加粗等樣式。最后，我們通過nth-child選擇器來對第五個和第六個元素進行定位和大小的設置。

通過使用CSS九宮格拼圖布局方式，我們可以輕松地實現頁面的分塊和分區，提高了頁面的可讀性和用戶體驗。