如果你和我一样一直在关注 CSS Grid 布局的话, 你应该知道 @Rachel Andrew 和 @Jen Simmons 都是 CSS Grid 布局的布道师. 两位女士一直都在推进 Grid 的特性和完善相关的特性. 这几天看到 @Jen Simmons 录了一个视频, 聊了一下 CSS Grid 布局相关的误区.
前言
在 web 世界中, 大家都知道, 使用任何一项新技术都易于犯错, 特别是像 CSS Grid 这样的与过去有很大变化的东西. 初学者或者有一定经验的 Web 开发人员, 都无法一时之间就能把控所有.@Jen Simmons 录制了一个视频, 向大家阐述了使用 CSS Grid 的九大误区, 也是使用 CSS Grid 布局易犯的错误, 并且在视频中提出了一些相关的建议, 让大家在使用 CSS Grid 布局的时候能尽量的避免这些误区, 甚至可以帮助一些同学改掉一些旧习惯.
如果你英文够好, 建议先直接观看下面这段视频. 接下来的视频都来自于 @Jen Simmons 录制的视频, 都放置在 Youtube 网站上的免费视频. 不过需要正常观后的话, 需要自备天梯.
https://youtu.be/0Gr1XSyxZy0
接下来简单的看看这九个误区, 以及相对应的一些资源, 希望接下来的内容能更好的帮助大家理解这几个误区, 以及增强这方面的知识点, 更好的避开这些误区.
误区一: 认为 CSS Grid 就是神
在CSS 布局指南 https://www.w3cplus.com/css/guide-css-layout.html 一文中已经提到过, 对于 Web 的布局, 它将是一个永恒的话题. 如果你对布局相关的知识有所了解, 你应该知道, 在 CSS Grid 出来之前, 所有的布局方案都是针对的. 直到 CSS Grid 出来之后, 才有了二维的布局. 就在此时, CSS Grid 布局能解决很多以前一直无法解决的布局方案.
就因为 CSS Grid 布局具有二维布局特性, 造成了大家对 CSS Grid 的第一个误区: 认为 CSS Grid 布局就是一神器, 无所不能. 事实上, 这是一种对 CSS Grid 认识的误区. 虽然 CSS Grid 布局能实现大部分的 Web 布局, 但并不代表所有的布局都应该用 CSS Grid 来实现. 正确的做法是:
在适当的项目采用适当的布局方案.
也因为这个误区, 社区对这个现象有过很多的讨论, 比如 "Flexbox 和 Grid 布局, 哪个更好?":
https://youtu.be/hs3piaN4b5I
有关于这方面的讨论还可以阅读:
The ultimate CSS battle: Grid vs Flexbox https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf
CSS Grid VS Flexbox: A Practical Comparison https://tutorialzine.com/2017/03/css-grid-vs-flexbox
- Should I use Grid or Flexbox? https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
- Flexbox vs. CSS Grid, When to use what? https://redonion.se/flexbox-vs-css-grid-when-to-use-what-2/
正因为这样的讨论, 在社区有一个共识. 在 Web 布局当中, 我们应该根据实际情况: Flexbox 和 Grid 布局结合在一起使用:
https://youtu.be/dQHtT47eH0M
特别是在 Card 组件方面的布局, 把 Flexbox 和 Grid 结合在一起将更显优势:
使用 CSS Grid 和 Flexbox 制作 Card https://www.w3cplus.com/css3/solving-problems-with-css-grid-and-flexbox-the-card-ui.html
CSS Grid 和 Flexbox 解决实际的布局问题 https://www.w3cplus.com/css3/css-grid-flexbox-solving-real-world-problems.html
CSS Grid + Flexbox Solving Real-world Problems https://medium.com/@petermouland/css-grid-flexbox-solving-real-world-problems-1cce3ecb2b51
How to combine Flexbox and CSS grids for efficient layouts https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/
另外一方面, 哪所现在的布局效果大部分是规规矩矩的正方形, 但在不久的将来, Web 的布局将会实现类似于杂志的布局效果. 面对这样的布局效果, CSS Grid 就显得心有余而力不足. 从这一方面来说, CSS Grid 并不是像大家所说的, 它是万能的.
https://youtu.be/pOB75oTNhw0
对于要实现类似于杂志风格的布局, 那么还是需要 clip-path https://www.w3cplus.com/blog/tags/431.html , https://www.w3cplus.com/css3/css-masking.html 和 shape-outside https://www.w3cplus.com/blog/tags/418.html 相关的属性的结合 . 特别是离不开
shape-outside 特性.
误区二: 只使用百分比设置尺寸大小
Web 的布局并不是一直都是固定宽度水平居中的布局, 很多时候是有自适应的布局. 实现自适应 (流式布局) 布局, 在大家的脑海中应该是使用百分比来实现布局. 但在 CSS Grid 布局中, 并非一尘不变. 主要是因为在 CSS Grid 的布局中, 可以使用 min-content,max-content 和 minmax()相关的特性:
https://youtu.be/lZ2JX_6SGNI
有关于这方面的更详细的介绍还可以阅读下面相关的文章:
- CSS Intrinsic & Extrinsic Sizing Module Level 3 https://www.w3.org/TR/css-sizing-3/#column-sizing
- CSS Grid Layout: The Minmax Function https://alligator.io/css/css-grid-layout-minmax-function/
- CSS Grid Layout: How to Use minmax() https://www.hongkiat.com/blog/css-grid-layout-minmax/
- MinMax in CSS Grid https://youtu.be/mVQiNpqXov8
除此之外, 还可以使用 CSS Grid 布局独有的 fr 单位. 也可以帮助我们实现类似于百分比的布局:
https://youtu.be/ZPtpzuRajzM
有关于 fr 单位更多的介绍可以阅读:
Introduction fr CSS unit https://css-tricks.com/introduction-fr-css-unit/
Guide to CSS Grid Layout Fr Unit https://www.hongkiat.com/blog/css-grid-layout-fr-unit/
Understanding CSS Grids Fractional Units (FR) the easy way https://hackernoon.com/understanding-css-grids-fractional-units-fr-the-easy-way-5f43ee008f29
What You Didn't know about the CSS Fractional Unit https://medium.com/flexbox-and-grids/what-you-didnt-know-about-the-css-fractional-unit-580bd62647e8
误区三: 需要断点
断点是 Web 响应式设计 https://www.w3cplus.com/blog/responsive 中的一个概念. 借用媒体查询在不同的断点处实现不一样的布局效果. 因此, 很多同学一直误以为, 在 CSS Grid 布局中实现响应式布局也需要通过媒体查询来实现. 而事实上并非如此.
CSS Grid 布局中有 "隐式" 和 "显式" 网格线的概念, 同时在 CSS Grid 布局中使用
grid-template-columns: repeat(auto-fit, minmax(200px, fr))
这样的代码, 在不使用媒体查询的情况下就可以很轻易的实现响应式布局.
https://youtu.be/tFKrK4eAiUQ
误区四: 被网络线编号搞糊涂
在 CSS Grid 布局中, 网格线编号是一个很重要的概念. 很多时候实现布局, 都会借助网格线来实现. 特别是在控制 Web 元素放置在具体的位置的时候, 就可以使用网格线编号的特性.
另外在 CSS Grid 布局中, 对于网格线还有两个非常重要的概念, 那就是隐式和显式网格线的编号. 另外在布局时, 除了使用显式的网格线编号之外, 还会根据你的布局区域, 创建隐式网格线. 也就是说, 自动创建隐式网格线.
- Naming Things In CSS Grid Layout https://www.smashingmagazine.com/2017/10/naming-things-css-grid-layout/
- CSS Grid Layout Terminology, Explained https://bitsofco.de/css-grid-terminology/
Quick Tip: Name Your CSS Grid Lines, Just in Case https://webdesign.tutsplus.com/tutorials/quick-tip-name-your-css-grid-lines-just-in-case--cms-27844
CSS Grid 布局: 显式和隐式网格线 https://www.w3cplus.com/css3/explicit-and-implicit-grid.html
- Innovative & Practical Graphic Design with CSS Grid https://youtu.be/-hmOZU7Zk10
- Basics of CSS Grid: The Big Picture https://youtu.be/FEnRpy9Xfes
误区五: 总是使用 12 列网格
https://youtu.be/ZPtpzuRajzM
十二列网格, 最早出处应该是 960gs 网格系统 https://960.gs/ . 在众多 CSS Framework 系统中都源于 960gs 创建了自己的网格系统. 估计也是因为这个原因, 很多使用 CSS Grid 布局的同学都误以为, 它是 12 列网格系统的一种变身, 而事实并非如此. CSS Grid 布局是单独的一个 CSS 模块. 除了具备 12 列网格系统的功能之外, 还具有独特的网格特性.
误区六: 忽略行的幂值
在网格布局中, 总是脱离不开行的概念. 一般情况下, 四条边可以组成一个行, 而且在一个行中有 N 个单元格. 而在 CSS Grid 布局中, 可以使用 fr,minmax(),max-content 和 auto 组合在一起定义 CSS Grid 布局中的行. 这样就可以让内容在不同的视窗大小实现较好的布局效果. 从而将响应式设计提高到一个全新的水平.
https://youtu.be/EEOJZy_Gge4
另外, 使用 CSS Grid 进行布局, 在 Web 布局上可以真正的提供空白区域. 这也正是行改变这一切的.
- https://youtu.be/YfIjFeBLhyA
- Unlocking the Power of CSS Grid Layout https://www.slideshare.net/rachelandrew/unlocking-the-power-of-css-grid-layout
- Using CSS Grid: Supporting Browsers Without Grid https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/
误区七: 一个框架
刚才提到了 CSS Framework 中的网格系统. 这也造成一个误区, CSS Grid 布局就是一个框架, 一个布局框架. 事实上, CSS Grid 布局除了具有 CSS Framework 中的网格系统特性之外, 还具备其他特性. 这些特性是网格系统无法达到的. 因为 CSS Grid 布局是一个二维布局, 而网格系统事实是一个一维布局.
误区八: 等待 IE11 的消亡
任何一个 CSS 特性, 很多同学惧怕使用的原因之一就是浏览器支持度. 那么 CSS Grid 的布局同样面临这样的问题. 其实, 最早提出 CSS Grid 布局模块是微软提出的功能模板, 只不过后面其他的浏览器支持力度更快, 造成一个现实就是其他浏览器比 IE 更早的实现 CSS Grid 布局的特性.
https://youtu.be/7msERxu7ivg
面对不能支持的浏览器, 对于前端的同学而言再正常不过了. 对于 CSS Grid 布局也是类似的. 你只需要按这七个方面去做 https://www.youtube.com/playlist?list=PLbSquHt1VCf1kpv9WRGMCA9_Nn4vCLZ9Y , 就可以解决相应的浏览器兼容问题.
Should I try to use the IE implementation of CSS Grid Layout? https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/
Supporting CSS Grid in Internet Explorer https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66
误区九: 犹豫不决
像 CSS Grid 布局这样的布局新技术使用得实现旧的设计更加容易. 更令人兴奋的是, 我们可以做一些新的事情 -- 把网页上的平面设计提升到一个新的高度. 那么使用 CSS Grid 布局, 可以让我重新创作, 实现更为复杂而又有意义的布局. 通过这样的方式来了解 CSS Grid 布局的特性, 以此更好地理解它对设计的意义.
https://youtu.be/qNtJ5p3h2A4
虽然 CSS Grid 布局非常的强大, 但碍于一些实际上的原因, 大部分人还在犹豫不决, 惧怕浏览器的兼容性. 就算是对这方面感兴趣的同学, 现在也还只是的是着玩玩的心态. 其实大家可以尝试着在自己的项目中使用 CSS Grid 来布局. 比如 @Jen 就通过一个示例, 一步步地指导你如何使用 CSS Grid 和一些其他的 CSS 特性, 实现一个类似杂志风格的布局.
https://youtu.be/OxrsO4aIjyc
总结
这里简单的列了使用 CSS Grid 布局易于产生的误区.@Jen 通过不同的视频向大家阐述了这些误区, 而且在相应的视频中向大家介绍了如何避免这些陷阱和旧的习惯. 视频中提到的一些建议和提示很值得我们大家花时间去学习和了解. 如果你感兴趣, 不信花时间去看看视频. 如果你想了解更多的相关东西, 建议你观看
来源: https://juejin.im/entry/5b56b5d9e51d45355d51d201