九宮格布局在網(wǎng)頁設(shè)計(jì)中經(jīng)常被使用到，它可以讓頁面的結(jié)構(gòu)更加清晰，同時(shí)也更加美觀。在CSS中，可以使用flex布局來實(shí)現(xiàn)頁面九宮格布局。以下是一段實(shí)現(xiàn)九宮格布局的CSS代碼：

.box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
width: 400px;
height: 400px;
}
.box div {
width: 30%;
height: 30%;
background-color: #ccc;
}

以上代碼中，我們首先在外層容器中設(shè)置了display:flex以及flex-wrap、justify-content、align-content等屬性來實(shí)現(xiàn)九宮格布局。其中flex-wrap設(shè)置為wrap，使得如果原先在一行中放不下的元素可以自動換行。justify-content和align-content分別設(shè)置為space-between使得在行和列方向上元素之間的空隙均等。

而對于內(nèi)部的元素，我們將其固定寬高比設(shè)置為30%，以此來讓它們在外容器中自適應(yīng)排列。同時(shí)，也可以通過設(shè)置內(nèi)部元素的背景顏色為#ccc來制作出九宮格的效果。