CSS實現自適應九宮格布局大全

本文轉載自查看原文 2018-12-14 11:25 9622

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

首先要注意的是九宮格容器是寬高相等的正方形，並且是自適應的，這里關鍵是實現寬高相等，有些人想到了相對視口寬度 vw，但是它是相對於屏幕可見寬度來設置的，並且會忽略滾動條的寬度，所以這是不可行的。這里我用一種變通方法，看代碼…

FlexBox

HTML 結構如下：

<div class="square">
 <ul class="square-inner flex">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 </ul>
</div>

抽取公共樣式：

.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 更為方便，代碼量更少，可以處理更為復雜的結構。

<div class="square">
 <div class="square-inner grid">
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 </div>
</div>

.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-效果圖

更多：CSS Grid布局指南

Float

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

<div class="square">
 <ul class="square-inner float">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 </ul>
</div>

.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;
}

Float-效果圖

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

Table

<div class="square">
 <table class="square-inner table">
 <tbody>
 <tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
 </tr>
 <tr>
 <td>4</td>
 <td>5</td>
 <td>6</td>
 </tr>
 <tr>
 <td>7</td>
 <td>8</td>
 <td>9</td>
 </tr>
 </tbody>
 </table>
</div>

.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;
}