网格布局

目前，谷歌浏览器及火狐浏览器已经对网格布局给予了充分支持。

定义网格布局

diplay: grid;

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                display: grid;
                grid-template-rows: 200px 100px 200px;
                grid-template-columns: repeat(4, 100px);
            }
            .container div{
                border: 1px solid lightgray;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="item1">item 1</div>
            <div class="item2">item 2</div>
            <div class="item3">item 3</div>
            <div class="item4">item 4</div>
            <div class="item5">item 5</div>
            <div class="item6">item 6</div>
            <div class="item7">item 7</div>
            <div class="item8">item 8</div>
            <div class="item9">item 9</div>
            <div class="item10">item 10</div>
            <div class="item11">item 11</div>
            <div class="item12">item 12</div>
        </div>


    </body>
</html>

container类定义了网格布局，就叫网格容器吧，其子元素就叫grid项目。

grid-template-rows

这个定义了每一行的高度，上面代码就是定义了3行，每行高度分别是200px，100px，200px;

grid-template-columns

定义了列数和宽度

grid-template-columns: repeat(列数, 宽度);

grid-template-columns: repeat(4, 100px);

等同于

grid-template-columns: 100px 100px 100px 100px;

这个显示边框，方便观察

.container div{
    border: 1px solid lightgray;
}

这样基本的网格就知道构建的方法了，接下来就是编写每个网格所占据的位置。

四个重要属性

grid-row-start 网格开始的水平线
grid-row-end 网格结束的水平线
grid-column-start 网格开始的垂直线
grid-column-end 网格结束的垂直线

用具体代码来解释

添加以下CSS代码

.item1{
    grid-row-start: 1;   /*表格中最上边那条水平线*/
    grid-row-end: 2;     /*表格中从上到下的第二条水平线*/
    grid-column-start: 1;    /*表格中最靠左的垂直线*/
    grid-column-end: 3;  /*表格中从左往右第三条水平线*/
}

确定了这些线的位置后，item1这个格子也就确定了，这四条线围成的格子就是了。

以上可以简写成以下代码

.item1{
    grid-row: 1/2;
    grid-column: 1/3;
}

网格布局的fr单位

在引入了网格布局后，又新增了一个单位fr(fraction的简称)，它是相对单位，1个fr可以得到空间中的1份，这具体什么1份，我就不清楚了，不过是个相对单位就行了，比px灵活。

改下CSS代码，看下效果

.container{
    display: grid;
    grid-template-rows: 200px 100px 200px;
    grid-template-columns: repeat(4, 1fr);
}

grid-gap

这个是行和行，列与列之间的间隔

.container{
    display: grid;
    grid-template-rows: 200px 100px 200px;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
}

grid-column-gap和grid-row-gap

前者是单独定义列与列的间隔，后者是单独定义行与行的间隔

命名网格线

通过命名网格线来分别定义单元格的宽度和高度。

如下代码，我是感觉挺麻烦的，可能太渣了，玩得还不够6。

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body{
                display: grid;
                width: 100%;
                min-height: 600px;
                grid-gap: 1rem;
                grid-template-columns:
                [main-start] 1fr   /*宽度  最左边的那条线*/
                [main-end];
                grid-template-rows:
                [row1-start] 80px  /*这后面 代表的是行的高度*/
                [row2-start] 1fr
                [row3-start] 100px
                [row3-end];

            }
            header{
                grid-column: main-start/ main-end;
                grid-row: row1-start/row2-start;
            }
            main{
                grid-column: main-start/ main-end;
                grid-row: row2-start/row3-start;

                display: grid;
                grid-gap: 1rem;
                grid-template-columns:
                [aside-start] 200px
                [aside-end];

                grid-template-rows:

                [aside-row-start ] 1fr
                [aside-row-end ];
                ;

            }
            aside{
                grid-column: aside-start/ aside-end;
                grid-row: aside-row-start/aside-row-end;
            }

            footer{
                grid-column: main-start/ main-end;
                grid-row: row3-start/row3-end;
            }
            .border{
                border: 1px solid lightgray;
            }
        </style>
    </head>
    <body>
        <header class="border">网页头部</header>
        <main class="border">
            <aside class="border">侧边栏</aside>
        </main>
        <footer class="border">网站脚部</footer>
    </body>
</html>

使用区域

利用属性grid-template-areas

这个看起来就比较直观

<!doctype html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <style type="text/css">
            .container{
                display: grid;
                grid-template-rows: 200px 100px 200px;
                grid-template-columns: repeat(2, 1fr);
                grid-template-areas:
                "header header"
                "sidebar content"
                "footer footer";
            }
            .header{grid-area: header;}
            .sidebar{grid-area: sidebar;}
            .content{grid-area: content;}
            .footer{grid-area: footer;}

            .container div{
                border: 1px solid lightgray;
            }

        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">网页头部</div>
            <div class="sidebar">侧边栏</div>
            <div class="footer">网页脚注</div>
            <div class="content">内容</div>
        </div>


    </body>
</html>

以上三种排列网格的方法，看自己喜欢哪个了。

提前祝大家新年快乐。