grid 布局是真正的 css 框架，和 flex 相比，它是二维的，而 flex 是一维的
几个 cheat sheet：
- https://alialaa.github.io/css-grid-cheat-sheet/
- A simple visual cheatsheet for CSS Grid Layout
- 学习 CSS 网格布局
（附之前我写的一个 flex cheat sheet）
入门的话，css-tricks 上有篇入门文章 Getting Started with CSS Grid，不过我更推荐这篇 5 分钟学会 CSS Grid 布局。因为是入门，两者不约而同都没有提到 grid-template-areas 这个 grid 布局最强大的属性
详细属性介绍可以看下 css-tricks 的这篇 A Complete Guide to Grid，英文吃力的话可以看下 中文版，但是排版远不及原文
或许你有疑问，grid 和 flex 的区别是什么？grid 是否可以取代 flex？答案当然是 no
先看下这篇文章 The ultimate CSS battle: Grid vs Flexbox，我来概括下文中说的二者区别：
- 一维 vs 二维（两者最大的区别）
- 内容优先 vs 布局优先（个人理解，因为 grid 是二维的，所以适用于大的布局方面，当然不是说 flex 不适用于布局，只是 grid 更合适，而 flex 适用于 grid 布局后的子元素，即文中所说的 content）
然后来看这篇文章 Does CSS Grid Replace Flexbox?，简单总结下文中所言。
首先：
- grid 能做 flex 不能做的事情
- flex 也能做 grid 不能做的事情
- 两者能一起用。grid 布局的元素能包含 flex 布局的元素，反之亦然
grid 对比 flex 的优势有：
- 二维
- 做大布局使用。做大布局的时候尽量用 grid，性能也比 flex 好
grid-gap属性非常好用，解决了痛点- 能减少使用媒体查询，
minmax()repeat(0和auto-fill非常好用
事实上，flex 通过某种类似 hack 也能实现二维，可以参考 这里，而 grid 也能实现一维，一维其实就是特殊情况下的二维，参考 这里
有了 grid，我们可以大胆抛弃 bootstrap grid 了，参考此文 Why CSS Grid is better than Bootstrap for creating layouts，简单总结下，grid 相比 bootstrap grid 有如下几点（有兴趣的可以根据原文写写 demo）：
- html 代码会变的更简单（但是 css 代码会比较复杂，不过随着 html 结构变的复杂，我们会发现 grid 比 bootstrap grid 布局好维护）
- 更灵活（如果布局需要改变，grid 更灵活）
- 没有 12 栅格的限制
最后，上个圣杯布局用 grid 实现的 demo（之前用 flex 实现过，在 这里），可以看到用 grid 实现更加简单。关于 grid 实现布局，可以看下 这篇文章 入门