simplify the life

grid 布局初体验

grid 布局是真正的 css 框架,和 flex 相比,它是二维的,而 flex 是一维的

几个 cheat sheet:

(附之前我写的一个 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(0auto-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 实现布局,可以看下 这篇文章 入门

posted on 2018-06-29 21:37 子迟 阅读(...) 评论(...) 编辑 收藏

导航

统计信息

News