CSS Grid网格布局是最近w3c纳入css3的一个布局模块。虽然还没有正式启用，但是对将来web布局的发展有很大的好处。下面的笔记是学习grid布局的心得。

Grid中的某些特性

Grid很像表格，是由网格线，网格轨道，网格单元，网格区域，网格容器，网格单元顺序组成。具体以后再看。

开启Grid

大部分浏览器都还不支持Grid，所以在chrome中进行开启实验选项获取支持。(以后所有实例均在chrome55进行演示)

• 地址栏输入chrome://flags#enable-experimental-web-platform-features
• 点击启用

上一个简单的例子(未开启实验室选项无法看到效果)

代码：
<style>
    .demo1{
        width:100%;
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
        grid-gap:10px;
    }
    .demo1 div{
        font-size:2em;
        text-align:center;
        background:#4caf50;
    }
</style>
<div class='demo1'>
    <div>a</div>
    <div>b</div>
    <div>c</div>
</div>

这个例子中有三个grid属性，首先使用grid需要设置display:grid。grid-template-columns:1fr 1fr 1fr。1fr的意思和flex布局中的flex:1类似，这个例子中就是3个等分的div。grid-gap:10px每个单元格的间距是10。

今天就到这边