HTML5作為當(dāng)前Web開發(fā)的主流技術(shù)，具有許多優(yōu)秀的特性，其中自適應(yīng)是其中非常重要的一點(diǎn)。九宮格作為一個很常見的展示方式，在HTML5中也可輕松實(shí)現(xiàn)手機(jī)自適應(yīng)。

.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 10px;
}
.grid-item {
background-color: #ccc;
padding: 10px;
text-align: center;
font-size: 18px;
}

代碼中使用了CSS的Grid布局方式，實(shí)現(xiàn)網(wǎng)格的自適應(yīng)布局。其中，.grid為九宮格容器的樣式類，display:grid;定義了九宮格的布局方式，grid-template-columns:repeat(auto-fit, minmax(100px, 1fr))則設(shè)置了每一個網(wǎng)格的寬度為100px,每行顯示一個，直到當(dāng)前行無法容納更多，就會自動換行，間距為10px。 .grid-item則定義了每一個網(wǎng)格元素的樣式。

通過這些簡單的CSS設(shè)置，即可實(shí)現(xiàn)一個適應(yīng)手機(jī)的九宮格。放入HTML代碼中，實(shí)現(xiàn)如下：

1
2
3
4
5
6
7
8
9

通過上述代碼，即可實(shí)現(xiàn)一個自適應(yīng)手機(jī)的九宮格布局，非常方便簡單。