九宮格可以用CSS進行繪制，需要使用到CSS中的“偽元素”以及“box-sizing”屬性。下面是九宮格的樣式代碼。

.container {
width: 300px;
height: 300px;
border: 5px solid black;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
}
.container::before {
content: '';
width: 33.3%;
height: 100%;
border-right: 5px solid black;
position: absolute;
left: 100px;
}
.container::after {
content: '';
width: 100%;
height: 33.3%;
border-bottom: 5px solid black;
position: absolute;
top: 100px;
}
.cell {
width: 33.3%;
height: 33.3%;
border: 5px solid black;
box-sizing: border-box;
}

上述代碼中，容器（.container）是九宮格的外層包裹，使用flex布局，flex-wrap屬性設(shè)置為wrap，讓元素能夠自動換行。在容器上方和左側(cè)分別使用偽元素:before和:after，分別繪制垂直和水平分割線。每個小格子使用.cell樣式進行設(shè)置，寬度和高度都為33.3%，整個九宮格就被平均分成了九個小格子。

使用上述代碼即可繪制出一個簡單的九宮格，可根據(jù)需求進行樣式的調(diào)整，如改變邊框顏色、格子大小等。