在網頁中實現九宮格布局是一種比較常見的布局方式，CSS的Flex布局就可以輕松實現。下面我們來了解一下如何使用CSS來實現九宮格布局。

首先，我們需要在HTML中創建一個div容器，寬度為父元素的100%，高度可以按照需求設置。然后，我們將父容器的display屬性設置為flex，并且設置flex-wrap為wrap，這樣子元素就能自動換行了。

.div-wrapper{
display: flex;
flex-wrap: wrap;
}

接下來，我們需要對子元素的寬度和高度進行設置。因為是九宮格，所以我們將子元素的寬度設置為父容器的1/3，高度也根據需要進行設置。

.div-item{
width: 33.33%;
height: 100px;
}

然后，我們將子元素的邊框和間距進行設置，這樣子元素就能夠分開了。

.div-item{
border: solid 1px #ccc;
margin: 10px;
}

這樣我們就完成了九宮格布局的基本設置。

完整代碼如下：

.div-wrapper{
display: flex;
flex-wrap: wrap;
}
.div-item{
width: 33.33%;
height: 100px;
border: solid 1px #ccc;
margin: 10px;
}

使用CSS的Flex布局，實現九宮格布局非常方便。只需要簡單的幾步就可以實現了。