CSS按比例九宮格是一種簡單實用的布局方式，可以輕松實現常見的圖片展示等需求。它通過設置父元素的寬度和高度，以及子元素的百分比屬性值來實現。

HTML代碼如下：
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
CSS代碼如下：
.grid-container {
width: 100%;
height: 0;
padding-bottom: 100%; /* 設定高度為寬度的1:1比例 */
display: flex;
flex-wrap: wrap;
}
.grid-item {
flex-basis: 33.33%; /* 設定每個格子的寬度為父容器的1/3 */
height: 0;
padding-bottom: 33.33%; /* 設定每個格子的高度為寬度的1:1比例 */
background-image: url('圖片地址'); /* 設定背景圖片 */
background-size: cover; /* 保持圖片比例鋪滿 */
}

其中，通過為父容器設置padding-bottom屬性的百分比，可以實現寬度與高度成比例。子元素通過flex布局的設定，可以實現等分布局，再通過設定padding-bottom屬性的百分比，實現每個格子的寬高比例控制。

以上就是關于CSS按比例九宮格的簡單介紹，希望對初學者們有所幫助。