大家在之前可能都用过 flexbox 来对 web 应用界面进行过布局，应该相对之前我们需要使用各种技巧，尤其一些非常规的技巧来实现响应式布局要容易的多吧。那么最近新推出的 grid 布局又是怎么回事呢？其实我们早在两年前就听说过 grid 布局那时候浏览器对他支持还不算好，所以没敢下手学习。
那么flexbox 和 grid 有什么不同呢？Flexbox 是一维的布局，而grid 应该算是二维布局。所以 grid 在维度是完胜 flexbox，即使我们可以通过嵌套来实现复制的布局。但是 grid 无需嵌套就可以实现相对复制的布局。
我们还是通过代码为大家讲解一下吧，这里我建立一个简单 html 页面。
定义一个 wrapper 大家可以随便定义，什么 container 呀 page 尽管用，然后这些 html 我用了 emmet 来快速写我的 html，这里我们一些占位文字只要写 lorem 后面加数字就可以得到你想要的数量的文字。
只要后跟着80 就可以得到下面的文字是不是很轻松。
运行网页看一下效果，不是很美观我们还需要稍加修饰让页面看起来舒服些。
给一个背景色，给一点空间让整个界面看起来舒服些。
为了区分不同 div 我们给奇数 div 点不同的样式以便于区分。
好现在我们就开始应用我们 grid 系统，这里讲 display 属性值给 grid 就创建了我们 grid 系统，如果给 flex 那么就创建了我们 flex 系统。然后我们就开始定义宽度比了，这里给出 grid-template-columns 70% 和 30% 表示两列的比例关系
多给一些 div 让我们更容易观察到效果
我们也可以给出更多定义让，
也可以定义 gap 来实现列之间的间隙
我们可以通过 grid-column-gap 和 grid-row-gap 为行和列分别添加间隙距离。
也可以通过grid-gap 来添加间隙空间。
