css grid布局的首次使用

首先来看一下效果图

接下来废话不多说，先上代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 610px;
            height: 610px;
            margin: 100px auto;
            display: grid;/* 说明以grid布局 */
            grid-template-columns: 200px 5px 200px 5px 200px;/* 网格划分为五列，包括间隔 */
            grid-template-rows: 200px 5px 200px 5px 200px;/* 网格划分为五行，包括间隔 */
        }
        .a{
            grid-column-start: 1;/* 单元格开始的那条列线 */
            grid-column-end: 2;/* 单元格结束的那条列线 */
            grid-row-start: 1;/* 单元格开始的那条行线 */
            grid-row-end: 4;/* 单元格结束的那条行线 */
            background: #5a5eff;
        }
        .b{
            grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 2;
            background: #F672E2;
        }
        .c{
            grid-column-start: 5;
            grid-column-end: 6;
            grid-row-start: 1;
            grid-row-end: 2;
            background: #FDF505;
        }
        .d{
            grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 3;
            grid-row-end: 4;
            background: #F90B0B;
        }
        .e{
            grid-column-start: 5;
            grid-column-end: 6;
            grid-row-start: 3;
            grid-row-end: 6;
            background: #41a8ff;
        }
        .f{
            grid-column-start: 1;
            grid-column-end: 2;
            grid-row-start: 5;
            grid-row-end: 6;
            background: #10FDD0;
        }
        .g{
            grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 5;
            grid-row-end: 6;
            background: #16FA07;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
        <div class="f"></div>
        <div class="g"></div>
    </div>
</body>
</html>

 

代码就这么多，还是挺简单的。

网格如下划分成五列，则用了6条列线

划分为五行，则用了6条行线

 

 

（请随意吐槽这张图片）

主要可以参考，http://www.tuicool.com/articles/F3mMJzv，里面有较详细的说明，图片也比较清晰，个人推荐可以参考一下

结合这张图片，应该很好理解的

 

还是很容易理解 的。

 

posted @ 2017-04-01 11:10  澹台宇鹏  阅读(1250)  评论(0)    收藏  举报