关注的几个博客上最近关于CSS Grid
的文章挺多。今天看了Jen Simmons关于CSS Grid
的一个演讲之后,总算对这个概念清晰了很多。
CSS Grid
是一个实现网格系统设计的强大工具。虽然平时设计师使用网格系统的理念来设计页面,但是我们开发者在实现的时候,并不会把它当作一个网格系统去实现,而是会考虑,怎么把这些元素放在一个一维的流中(从页面左上角开始)。CSS Grid
正是在技术上支持了这种网格系统的二维布局。
之所以那么多人用Bootstrap
,也是因为开发者要实现响应式的网格系统时,时间成本比较高,比如需要我们自己计算宽度高度的比例,手动写媒体查询等等。但Bootstrap
提供了一套“模板”,帮我们简化了这些工作,也让页面看上去符合网格系统的美观性。但结果就是,做出来的网页,看上去风格差不多。
演讲视频最后说,我们学习一个框架,比如React
或者Bootstrap
,但它们是可能会过时的,没准儿哪天我们就不需要用它们。但是呢,学习CSS是会 last forever
的!
强烈推荐对CSS Grid
感兴趣的人看看这个演讲~
- 演讲视频:https://www.youtube.com/watch?v=Gn3JOE6qMuE
- 对应的PPT:https://speakerdeck.com/jensimmons/designing-with-grid-ux-burlington
- 她做的一些用到Grid的网页的例子:http://labs.jensimmons.com/
比如这个挺酷:http://labs.jensimmons.com/2017/03-004.html - 一个用来学习CSS Grid的小游戏:http://cssgridgarden.com/