grid网格布局应用案例--实现12列

grid网格布局应用案例--实现12列

html:

    <!-- 网格布局 实现12列 -->
    <div class="row">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>

css:

（1）父元素设置 

display: grid // 默认是块级元素 

display: inline-grid // 默认是行内块元素 

注意：设置为grid后，子元素的float, display:inline-block,display:table-cell  等设置都无效了。

（2）父元素设置 grid-template-columns: 定义列数，每一列的列宽。

        .row{
            height: 200px;
            border: 2px solid #000;

            /* 设置成 网格容器 */
            display: grid;
            /* 设置列宽 把容器分成12列*/
            grid-template-columns: repeat(12,1fr);
        }
        .col{
            border: 1px solid #ccc;
            background-color: green;
        }