九宮格布局是一種常用的網頁布局方式，它可以將網頁分成九個塊，使得網頁呈現出更好的平衡和美觀。而使用CSS代碼來實現九宮格布局的自適應可以讓網頁具備更好的易用性和靈活性。

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-gap: 10px;
justify-items: center;
align-items: center;
}
.grid-item {
width: 100%;
height: 0;
padding-top: 100%;
background-color: #ddd;
}

上述代碼是使用CSS的Grid布局方式實現的九宮格布局代碼。其中，grid-template-columns屬性設置了每一列的寬度，實現了自適應布局。具體來說，它使用了repeat(auto-fill, minmax(250px, 1fr))這個函數，表示將列平均分配，并且最小寬度為250px，最大占比為1。這樣可以保證在不同屏幕尺寸下，網頁能夠自適應地展示出完整版面。

而grid-gap屬性則是用來設置網格元素之間的距離，配合justify-items和align-items屬性可以使得元素在網頁中居中展示，增加網頁的視覺美感。

另外，對于每個格子內元素的寬度、高度以及背景顏色等設置可以根據實際需求進行具體調整。值得一提的是，在移動端設備上展示時，可以使用響應式設計和媒體查詢等方式對九宮格布局進行進一步優化和調整，使得在小屏幕下同樣能夠展示出良好的用戶體驗。