为什么我们需要网格布局？
在我们的Web内容中，可以将其分割成很多个内容块，而这些内容块都占据自己的区域(regions)，可以将这些区域想像成是一个虚拟的网格。到目前为止，在一个模板中使用不同的结构标签，使用多个浮动和手动计算实现一个布局。这对于Web前端人员来说，这是一件痛苦之事。而网格布局将让你摆脱这样的困局，让你的布局方法变得非常简单与清晰。
网格布局给了我们一种方法——创建的结构与使用表格(table)布局并没有什么不同。然而，他是在CSS中实现而不是在HTML中实现，同时还可以依赖于媒体查询根据不同的上下文得新定义布局。这对于喜欢响应式设计的同学来说是一个绝对利好的消息。因为你不在需要再担心你的HTML结构而影响你的布局。
网格布局还可以让我们摆脱现在布局中存在的文档流限制，换句话说，你的结构不需要根据设计稿从上往上布置了。这也意味着您可以自由地更改页面元素位置。这最适合你在不同的断点位置实现你最需要的布局，而不再需要为响应你的设计而担心HTML结构的问题。
什么是CSS Grid Layout?
CSS Grid Layout是CSS为布局新增的一个模块。网格布局特性主要是针对于Web应用程序的开发者。可以用这个模块实现许多不同的布局。网络布局可以将应用程序分割成不同的空间，或者定义他们的大小、位置以及层级。
就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。
此外，没有内容结构的网格布局有助于使用流体、调整顺序等技术管理或更改布局。通过结合CSS的媒体查询属性，可以控制网格布局容器和他们的子元素，使用页面的布局根据不同的设备和可用空间调整元素的显示风格与定位，而不需要去改变文档结构的本质内容。
浏览器兼容性
众观下来，仅在IE10+上支持，而且也仅支持部分属性。或许很多同学看到这样的兼容性，又会止步，或者呵呵两声闪人了。不过我们学习是无防，在各浏览器中通过设置可以做测试效果，在下一次中将会向大家介绍如何在浏览器中开启此功能。
Grid vs Flexbox
在www-list邮件中常常会看到一种Pk的现像：谈到网格就会扯到Flexbox。假设浏览器都支持这两个模块，你将选择grid还是flexbox来给页面布局。其实当你了解两者之后你会很轻松的做出选择。flexbox是一维布局，他只能在一条直线上放置你的内容区块；而grid是一个二维布局。前面也简单说到，你可以根据你的设计需求，将内容区块放置到任何你想要放的地方。那么不用多说，你应该知道哪一种更适合你的布局。
网格术语
想要玩转CSS Grid Layout，就需要先了解网格给我们的一些新术语以及一些CSS属性和值。在这一节中，将简单的向大家解释网格布局中的一些概念与术语。
网格线(Grid Lines)
网格线组成了网格，他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。
上图突出显示的红线就是第二列的网格线（line2）。
网格轨道(Grid Track)
网格轨道是就是相邻两条网格线之间的空间，就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小，用来控制宽度或高度。
图中突出显示的就是行线line2和line3之间组成的网格轨道。
网格单元格(Grid Cell)
网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。
图中突出显示的单元格是由行线line2、line3和列表line2、line3组成的。
网格区域(Grid Area)
网格区域是由任意四条网格线组成的空间，所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。
图中突出显示的网格区域是行线line1、line3和列线line2、line4之间的区域，其主要包括了四个网格单元格。
网格容器(Grid Containers)
通过使用display属性给元素显式设置了属性值grid或inline-grid，此时这个元素将自动变成网格容器。这个类似于flexbox一样，将元素设置设置为display:flex，元素将自动变成弹性盒模型。
由于网格容器不是块容器，所以有部分属性在网格布局中将会失效：
多列布局模块中的所有column-*属性运用在网格容器上将失效
float和clear使用在网格项目（网格单元格Grid Cell）上将失效
vertical-align使用在网格单元格上将失效
::first-line和::first-letter这样的伪元素不能应用在网格容器上
网格单元格顺序(order)
网格单元格顺序和Flexbox模块一样，通过order属性来对网格单父元格进行顺序重排。
六种布局方式总结：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局。
圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。
基础HTML：
基础CSS：
对于container，给它设置一个 overflow: hidden 使其成为一个 BFC ，使三栏浮动，并相对定位，给左右两个容器设置 200px 的宽度中间的容器设置 100% 的宽度。
此时 left 和 right 被相对于父元素 container 宽度的 100% 的 center 挤到下面。
BFC 的作用：
步骤：
这时，圣杯布局就完成了，但是在拖到很小的时候，布局会乱，以下是最终样式。
这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于 center 是在 container 的 padding 中的，因此宽度小的时候会出现混乱。
双飞翼布局给 center 部分包裹了一个 main 通过设置 margin 主动地把页面撑开。
基础HTML：
步骤 1 和 2 同圣杯布局
区别：
第三步：
给 main 设置 margin: 0 200px ，同时设置 overflow: hidden 使其成为一个 BFC
这时窗口宽度过小时就不会出现混乱的情况了，关键点在于内容部分是包裹在 main 中。
以下是最终样式：
Flex布局是由CSS3提供的一种方便的布局方式。
基础HTML：
步骤：
flex-shrink :
定义项目的缩小比例，默认为1，如果空间不足则项目缩小，如果有一项为0，其他为1，当空间不足时，前者不缩小。
可以看到，flex 布局是一种极其灵活的布局方式。
以下是最终样式：
基础HTML：
步骤：
这种方式的缺点是依赖于left 和 right 的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。
表格布局的好处是能使三栏的高度统一。
基础HTML：
步骤：
这种布局方式能使得三栏的高度是统一的，但不能使center放在最前面得到最先渲染。
网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性并不好。网格布局，可以将页面分割成多个区域，或者用来定义内部元素的大小，位置，图层关系。
基础HTML：
步骤：
仅仅四条样式命令就能完成三栏布局，可见网格布局之强大
栅格的响应式能力，得益于CSS3媒体查询（Media Queries）的强力支持，从而针对四类不同尺寸的屏幕，进行相应的适配处理
第一件事，最近写的项目里用到了layui这个框架里面的栅格布局，之前没有注意太多，直接就用了 layui-col-md ，没有仔细去看这些有什么区别，但是当放大缩小页面的时候会发现原本整齐的栅格布局就全都乱了，成了堆叠排列。后来仔细看了一下这些，改用 layui-col-sm 、 layui-col-lg ，由于需求需要，各种大小屏幕都要去适配，我就去官方文档看了一下改用 layui-col-xs 就没有问题了。
第二件事， layui-col-md 布局不适配ie8，所以想要在ie8中使用栅格布局，可以改用 layui-col-xs ，这样子ie8中就不会有堆叠排列的样式，就是很正常的排列方式。
