grid 布局初体验

Posted 2020-11-20 zichi

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?，简单总结下文中所言。

首先：

1. grid 能做 flex 不能做的事情
2. flex 也能做 grid 不能做的事情
3. 两者能一起用。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 实现布局，可以看下 这篇文章 入门