在網頁設計中，常常會遇到需要展示圖片的情況。為了能夠將圖片有序地排列展示，我們可以使用九宮格的布局方式。而在不同的設備上，九宮格的大小也應該隨之自適應調整。下面我們來看看如何使用CSS實現自適應九宮格。

//HTML代碼
<div class="grid">
<div class="box">
<img src="./image1.jpg">
</div>
<div class="box">
<img src="./image2.jpg">
</div>
<div class="box">
<img src="./image3.jpg">
</div>
<div class="box">
<img src="./image4.jpg">
</div>
<div class="box">
<img src="./image5.jpg">
</div>
<div class="box">
<img src="./image6.jpg">
</div>
<div class="box">
<img src="./image7.jpg">
</div>
<div class="box">
<img src="./image8.jpg">
</div>
<div class="box">
<img src="./image9.jpg">
</div>
</div>
//CSS代碼
.grid{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box{
width: 33.3%;
padding: 10px;
}
.box img{
width: 100%;
height: auto;
}
@media screen and (max-width: 768px){
.box{
width: 50%;
}
}
@media screen and (max-width: 480px){
.box{
width: 100%;
}
}

首先，在HTML中，我們需要使用一個包裹所有九個圖片的父級div，這個div的class命名為"grid"。然后，我們在這個父級div下創建九個class為"box"的子級div，每個子級div中再插入一張圖片。

接著，在CSS中，我們使用flex布局，將子級div往下自動換行排列。在子級div的樣式中，我們將寬度設置為33.3%，并添加10px的內邊距。在子級div中的圖片樣式中，我們將圖片的寬度設置為100%，高度自適應。

考慮到不同設備的屏幕尺寸，我們還需要添加媒體查詢來適應不同的設備。比如，在屏幕寬度小于768px的設備中，我們將子級div的寬度調整為50%；在屏幕寬度小于480px的設備中，我們將子級div的寬度調整為100%。

通過以上的CSS樣式配置，我們的九宮格展示效果就會根據不同設備的屏幕尺寸自適應調整啦！