CSS九宮格布局是一種常見(jiàn)的網(wǎng)頁(yè)布局方式，通過(guò)劃分網(wǎng)頁(yè)為九個(gè)部分，方便地安排和排列內(nèi)容。以下是一個(gè)實(shí)現(xiàn)九宮格布局的CSS代碼：

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.item-2 {
grid-column: 3;
grid-row: 1 / 3;
}
.item-3 {
grid-column: 1 / 3;
grid-row: 3;
}
.item-4 {
grid-column: 3;
grid-row: 3;
}
.item-5 {
grid-column: 2;
grid-row: 1 / 3;
}
.item-6 {
grid-column: 1;
grid-row: 2 / 4;
}
.item-7 {
grid-column: 2;
grid-row: 3;
}
.item-8 {
grid-column: 2 / 4;
grid-row: 4;
}
.item-9 {
grid-column: 1;
grid-row: 4;
}

首先，我們要定義一個(gè)容器div，設(shè)為grid布局，同時(shí)設(shè)置三行三列（grid-template-columns和grid-template-rows屬性）。然后，我們可以使用grid-column和grid-row屬性來(lái)控制每個(gè)網(wǎng)格元素所在的行和列，實(shí)現(xiàn)完整的九宮格布局。