在網(wǎng)頁排版中，我們經(jīng)常需要使用到格子布局。而利用 CSS 實現(xiàn)自適應(yīng)格子布局則是常見的技巧之一。簡單來說，自適應(yīng)格子布局就是指格子的寬度會根據(jù)容器的寬度自適應(yīng)調(diào)整，從而保證布局的整體美觀性和有效性。

實現(xiàn)自適應(yīng)格子布局最關(guān)鍵的是使用 CSS 的 display 和 float 屬性。在 CSS 中，我們可以通過設(shè)置 display 為 inline-block 或者 float 為 left/right 來實現(xiàn)格子的布局。其中，float 屬性可以將元素向左或向右浮動，而其它元素則會繞過浮動元素排列，從而實現(xiàn)了自適應(yīng)的布局效果。

.grid{
width: 100%;
}
.grid-item{
display: inline-block;
width: 24%;
margin-right: 1%;
margin-bottom: 10px;
vertical-align: top;
}
.grid-item:last-of-type{
margin-right: 0;
}
@media screen and (max-width: 768px){
.grid-item{
width: 49%;
margin-right: 1%;
margin-bottom: 10px;
vertical-align: top;
}
.grid-item:last-of-type{
margin-right: 0;
}
}

上面的代碼是簡單的自適應(yīng)格子布局示例。通過設(shè)置 grid-item 的 display 為 inline-block 和設(shè)置其寬度為 24%，再通過 margin-right 和 margin-bottom 兩個屬性來定義不同元素之間的間距。而添加 "last-of-type" CSS 偽類，則可以保證最后一個元素不留下多余的空白。

通過上述代碼中的 @media 查詢，我們還加入了一個響應(yīng)式布局，當(dāng)屏幕寬度小于或等于 768px 時，每個格子的寬度會調(diào)整為 49%。這個技巧可以很好地適應(yīng)各種設(shè)備和屏幕大小，從而保證整體布局的適應(yīng)性和美觀性。