看到微博和朋友圈都實現了圖片九宮格，曾經有次面試也問到了九宮格這個問題，當時想到的是先固定每個單元格的寬高，然后進行浮動。今天想折騰一下，實現自適應父元素寬度的布局。這次我只寫了四種方式去實現九宮格，算上inline-block的話就是五種了。

首先要注意的是九宮格容器是寬高相等的正方形，并且是自適應的，這里關鍵是實現寬高相等，有些人想到了相對視口寬度，但是它是相對于屏幕可見寬度來設置的，并且會忽略滾動條的寬度，所以這是不可行的。

這里我用一種變通方法，看代碼：

一、FlexBox

HTML代碼：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

CSS代碼：

.square{

position: relative;

width: 100%;

height: 0;

padding-bottom: 100%; /* padding百分比是相對父元素寬度計算的 */

margin-bottom: 30px;

}

.square-inner{

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%; /* 鋪滿父元素容器，這時候寬高就始終相等了 */

}

.square-inner>li{

width: calc(98%/ 3); /* calc里面的運算符兩邊要空格 */

height: calc(98%/ 3);

margin-right: 1%;

margin-bottom: 1%;

overflow: hidden;

}

使用Flex的一個好處是不用再擔心高度塌陷的問題，而且還可以輕松實現子元素橫向豎向甚至按比例伸縮擴展的布局。

.flex{

display: flex;

flex-wrap: wrap;

}

.flex>li{

flex-grow: 1; /* 子元素按1/n的比例進行拉伸 */

background-color: #4d839c;

text-align: center;

color: #fff;

font-size: 50px;

line-height: 2;

}

.flex>li:nth-of-type(3n){ /* 選擇個數是3的倍數的元素 */

margin-right: 0;

}

.flex>li:nth-of-type(n+7){ /* 選擇倒數的三個元素，n可以取0 */

margin-bottom: 0;

}

FlexBox實現九宮格效果預覽

二、Grid

對于網格布局來說，grid比flex更為方便，代碼量更少，可以處理更為復雜的結構。

HTML代碼：

123456789

CSS代碼：

.grid{

display: grid;

grid-template-columns: repeat(3, 1fr); /* 相當于 1fr 1fr 1fr */

grid-template-rows: repeat(3, 1fr); /* fr單位可以將容器分為幾等份 */

grid-gap: 1%; /* grid-column-gap 和 grid-row-gap的簡寫 */

grid-auto-flow: row;

}

.grid>div{

color: #fff;

font-size: 50px;

line-height: 2;

text-align: center;

background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);

}

Grid實現九宮格效果預覽

三、Float

浮動實現九宮格就不多說了，原理同上。

HTML代碼：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

CSS代碼：

.float::after{

content: "";

display: block;

clear: both;

visibility: hidden;

}

.float>li{

float: left;

background-color: #42a59f;

text-align: center;

color: #fff;

font-size: 50px;

line-height: 2;

}

.float>li:nth-of-type(3n){

margin-right: 0;

}

.float>li:nth-of-type(n+7){

margin-bottom: 0;

}

除了浮動，這里li也可以使用display:inline-block;實現同樣的效果，不過要注意HTML代碼非壓縮情況下行塊級元素之間會出現默認間隔，不同瀏覽器下表現還不一樣，這時可以給父級元素設置font-size:0;

Float實現九宮格效果預覽

四、Table

HTML代碼：

1	2	3
4	5	6
7	8	9

CSS代碼：

.table{

border-collapse: separate;

border-spacing: 0.57em;

font-size: 14px;

empty-cells: hide;

table-layout: fixed;

}

.table>tbody>tr>td{

text-align: center;

background-color: #889ed8;

overflow: hidden;

}

Table實現九宮格效果預覽

說下用表格實現九宮格有哪些瑕疵：

最后一行最后一列的單元格寬高與前面的不一致，雖然相差不大，但是還是有差異的；

與前面的兩種方法不同，table單元格之間的間隔是利用border-spacing屬性實現的，且不支持百分比，單元格四周都有類似margin的外邊距效果，如下圖。

分析

綜上來看，個人認為FlexBox適合用于移動端，PC端IE10以下不支持；Grid網格布局比較方便，但是規范還未成熟，主流瀏覽器廠商尚未推廣，不推薦使用在項目中；浮動和行塊級式聲明可以兼容到IE6，移動端和PC端支持的都不錯；Table因為實現有瑕疵所以不推薦使用。

總結

以上是生活随笔為你收集整理的html5九宫格布局,CSS实现自适应九宫格布局（完整方法大全）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。