CSS 网格布局

网格布局（CSS grid）是一种网页设计的新布局，目前许多主流浏览器已经支持了这一布局，对前端开发人员来说，是需要了解并学会使用的一种很方便快捷的布局。

HTML布局

<div class="grid">
  <div class="title">title</div>
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="content">
    <p>contentA</p>
    <p>contentB</p>
  </div>
  <div class="footer">footer</div>
</div>

上面的 HTML 就是一段简单的 grid 布局，我们先看看它的运行效果，其中我加了一些其他样式

image

现在，让我们为它加上网格布局代码：

.grid{
    display:grid;
    grid-template-columns:1fr 600px 600px 1fr;
    grid-template-rows:1fr 1fr 1fr 1fr;
    grid-template-areas:
    ". title title ."
    ". header header ."
    ". sidebar content ."
    ". footer footer ."
}
.title{
  grid-area:title;
}
.header{
  grid-area:header;
}
.sidebar{
  grid-area:sidebar;
}
.content{
  grid-area:content;
}
.footer{
  grid-area:footer;
}

突然间代码有点多，一个一个解释下。首先在父元素 div 中设置display:grid;表示将其设置为网格布局；然后grid-template-columns属性是设置网格中列的尺寸大小及其占据空间，上面的参数是1fr 600px 600px 1fr表示左右各留 1fr 的距离，中间网格部分占据总共 1200px；接着grid-template-rows顾名思义就是行的意思，规定以几行来呈现布局，可以看到上面有四个参数，分别为1fr，所以整个布局总共有四行，每一行的高度为 1fr , fr 是一个单位，比 px 要大些。根据上面的描述可以看到目前的预览效果是这样：

Chrome 浏览器
也许细心的你已经发现了，上面的代码还有两个属性grid-template-areas 和 grid-area,这两个属性官方文档里面解释了一大堆文字，我的简单理解是：规定网格布局中的区域，也就是每一行中放几个内容块。可以看到，我在 title、header、sidebar、content 和 footer 中都写上了一个属性：grid-area: 模块名,然后在grid-template-areas中把些模块名都写了上去，左右两边还多了两个.，这是为什么呢？
浏览器中的效果
其实就是把网页分成了四列，左右两边的空白就对应上面的两个" . "，然后中间" title title "表示 title 这个 div 占了两列，而第三行中的" sidebar content "就是 sidebar 和 content 这两块各占一半平分，最后的 footer 也是占了两块的。
最后，附上网格布局常用属性的官方定义，供读者参考理解

grid-template-columns：定义网格列的线名称和跟踪大小调整功能。
grid-template-rows：该属性是基于网格行的维度，去定义网格线的名称和网格轨道的尺寸大小。
grid-template-areas：属性是 grid areas 在CSS中的特定命名.
grid areas：是一种对于 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写，通过基线（line），跨度（span）或没有（自动）的网格放置在 grid row 中指定一个网格项的大小和位置，继而确定 grid area 的边界。
grid-gap：指定行和列之间的间隙。

以上属性的定义来源于 MDN web ,谷歌翻译。