CSS-Grid Layout

[ahua52]

What

grid 布局是CSS新增的一个二维布局，可以将页面分割成不同的空间, 通过 display:grid来设置使用，此时元素将自动变成网格容器。 似乎目前grid布局仍处于草案阶段。浏览器支持比较有限，仅在IE10+上支持，而且也仅支持部分属性。不过我们学习了解一下倒无防。

Why

一般来说，实现一种布局特性我们会有很多种方法，比如如果实现一些自适应可伸缩的布局，稍微麻烦点的可以用 float ，position, margin等属性解决， 后来 flex布局的出现让这个问题得到了更加简单的解决，但flex布局解决的是单向一维度的排列。但对于二维的布局只能通过多个flex布局嵌套实现， 而grid本身就是一个二维布局，实现起来就相当简单。
说到grid布局， 同时会让人想到table 布局，二者都很简单的实现了二维层面的布局，但grid布局区别于table的一个地方是它可以很简单的实现响应式布局。
总之，grid 布局的出现一大好处就是化繁为简，能够让一些比较复杂的页面布局得到很简单的解决。

How

下面对Grid Layout的使用方法简单介绍下

定义grid：

首先在grid item外的父级容器上定义display: grid

<div style="display: grid">
        <div>grid item</div>
        ... ...
 </div>

相关概念

grid lines – 是横向和纵向划分grid的线，它可以一朝数字顺序被指定，也可以用用户制定的名字被指定。
grid tracks – 指的是一个grid列或者行之前的区域，换而言之是两个相邻的grid lines之前的空间。
grid cells – 一个grid cell指的是grid中最小的单位。
grid areas – 是用来展现一个或多个grid item的逻辑空间。它被四条grid line包围。

grid item 属性

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

这四个属性中，grid-column-start和grid-row-start指明区域起始线，grid-column-end和grid-row-end指明区域结束线。这四个属性均有以下四个值可取。

• – 可以是一个数字，代表的是 grid line
• span – 该项会横跨所提供的数字个grid tracks
• span – 该项会横跨直到碰到下一个指定名字的grid line
• auto – 自动或者默认属性

除以上提到，grid还拥有更多的属性，使之可以定义grid item的宽高，间隙，内部自适应的方式，对齐方式等等。更多属性可以参考W3C文档。

example

经典圣杯布局（header- left, main, right- footer） 用grid实现如下：

<div class="grid-layout">
  <div class="header">header</div>
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>
  <div class="footer">footer</div>
</div>

.container {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 40px 300px 50px;
  grid-template-areas: "header header header"
                       "left main right"
                       "footer footer footer";
}

.container .header {
  grid-area: header;
}

.container .footer {
  grid-area: footer;
}

.container .left {
  grid-area: left;
}

.container .right {
  grid-area: right;
}

.container .main {
  grid-area: main;
}