CSS实现九宫格布局方法

在实际开发中经常会遇到九宫格布局，所以总结几种利用CSS实现九宫格布局的方法，仅供参考...

目录：

1. 利用grid创建网络布局

2. 利用display：table

3. 利用absolute方位值

4. 利用float

5. 利用flex弹性布局

方法一：利用grid创建网络布局

网络布局(grid)是最强大的CSS布局方案。

它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

参考文档：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

CSS

    /*指定一个三行三列的网格，列宽和行高都是100px*/
.wrapper {
            display: grid;
            grid-template-columns: 100px 100px 100px; /*定义每一列的列宽*/
            grid-template-rows: 100px 100px 100px;/*定义每一行的行高*/
        }
        .list {
            background: #eee;
        }
        .list:nth-child(odd) {
            background: #999;
        }

HTML

  <div class="wrapper">
        <div class="list list1">1</div>
        <div class="list list2">2</div>
        <div class="list list3">3</div>
        <div class="list list4">4</div>
        <div class="list list5">5</div>
        <div class="list list6">6</div>
        <div class="list list7">7</div>
        <div class="list list8">8</div>
        <div class="list list9">9</div>
    </div>

方法二：利用display：table

原理：

 1. 三行li，每个li里三列div（模拟表格的结构）

2. 父元素ul使用display: table（此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。）

3. li元素使用display: table-row（此元素会作为一个表格行显示（类似 <tr>）。）

 4. li元素内部三个子元素使用display: table-cell（此元素会作为一个表格单元格显示（类似 <td> 和 <th>））

CSS

 .table {
            display: table;
        }

        .table li {
            display: table-row;
            background: #beffee;
        }

        .table li:nth-child(odd) {
            background: #bec3ff;
        }

        .table li div {
            width: 200px;
            line-height: 200px;
            display: table-cell;
            text-align: center;
        }

        .table li:nth-child(odd) div:nth-child(even) {
            background: #beffee;
        }

        .table li:nth-child(even) div:nth-child(even) {
            background: #bec3ff;
        }

HTML

 <ul class="table">
        <li>
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </li>
        <li>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </li>
        <li>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </li>
    </ul>

方法三：利用absolute方位值

原理：absolute+四个方位值撑开局面、float+宽度百分比实现横向排列。高度百分比实现自适应。

            关键点：

             1.page最外层的父元素使用absolute负责占位，给子元素们把空间拉开。或者用宽高也行

             2.每一个块的父元素list利用浮动和33.33%的宽度百分比实现横向自适应排列

CSS

    <div class="page">
        <div class="list" data-index="1">
        </div>
        <div class="list" data-index="2">
        </div>
        <div class="list" data-index="3">
        </div>
        <div class="list" data-index="4">
        </div>
        <div class="list" data-index="5">
        </div>
        <div class="list" data-index="6">
        </div>
        <div class="list" data-index="7">
        </div>
        <div class="list" data-index="8">
        </div>
        <div class="list" data-index="9">
        </div>
    </div>

HTML

       .page {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }

        .list {
            float: left;
            height: 33.3%;
            width: 33.3%;
            position: relative;
        }

方法四：利用float实现

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

HTML

    <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>

方法五：利用flex弹性布局

flex布局是目前用的比较多的一种方法，可以详细学习下

flex参考文档：https://www.runoob.com/w3cnote/flex-grammar.html

     .flexDiv {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            /*换行*/
        }

        .flex {
            width: calc(calc(100% / 3) - 10px);
            margin: 5px;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid #000;
        }

        .flex:nth-of-type(odd) {
            background: red;
        }

HTML

   <div class="flexDiv">
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex"></div>
        <div class="flex"></div>
    </div>

本文只是将9宫格布局的几种方法总结了一下，并未对原理进行详细说明，在这里只是做个记录，欢迎各位批评指正。

参考文档：

https://www.cnblogs.com/sunshq/p/10118425.html

https://www.cnblogs.com/padding1015/p/9566443.html