标签:改变 sheet 不能 属性 tin 优势 iba 好用 结构
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,我来概括下文中说的二者区别:
然后来看这篇文章 Does CSS Grid Replace Flexbox?,简单总结下文中所言。
首先:
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):
最后,上个圣杯布局用 grid 实现的 demo(之前用 flex 实现过,在 这里),可以看到用 grid 实现更加简单。关于 grid 实现布局,可以看下 这篇文章 入门
标签:改变 sheet 不能 属性 tin 优势 iba 好用 结构
原文地址:https://www.cnblogs.com/zichi/p/9245512.html