CSS Grid布局这样玩

自从去年下半年开始,CSS Grid布局的相关教程在互联网上就铺天盖地,可谓是声势浩大。就针对于Web布局而言,个人认为Grid布局将是Web布局的神器,它改变了以往任何一种布局方式或者方法。不管以前的采用什么布局方法都可以说是一维的布局方式,而Grid最大的特色,采用了二维布局。@Rachel Andrew也一直致力于完善Grid的规范。

就我个人而言,我也一直在不断的关注这个布局利器的相关更新,自从最初规范的出来,到目前规范的完善。在站上也不断的在更新CSS Grid布局的使用。虽然这方向的教程已经很多了,但各有千秋,我追求以最简单,最直接的方式来阐述它的使用方式方法。让初学者能尽快的掌握其使用规则。

前段时间@Mirza Joldic在Medium上发布了一篇文章,通过几个Gif动态非常形象的阐述了CSS Grid的几个核心概念以及使用方法,今天我就借花献佛,用这几张图让初学者快速掌握CSS Grid的核心概念和使用技巧。

Web布局的历史演变

自从Web出来至今,Web的布局也经过了几个演变,下图可以一目了然:

有关于Web布局的演变史,去年也整理过一篇相关的文章简单的阐述了这方面的故事,如果你感兴趣的话,可以点击这里进行了解。在Web的学习过程中,学习Web布局是一个不可避免的过程,而随着前端技术的日新月异的变化,布局方式也在不断的更新,早在2013年@Peter Gasston就对CSS布局的未来趋势就做过预判断,文章中就提供了CSS Grid的布局。如果今天来看,这种趋势的预判是正确的,特别是今年3月份之后,各大主流浏览器都发布了对CSS Grid的支持。既然如此,学习CSS Grid相关的知识就很有必要。

既然掌握CSS Grid很有必要,那用什么样的方式能最快的掌握CSS Grid相关的知识呢?这很重要。 特别是@Mirza Joldic在Medium上发布的文章,里面的动图让我耳目一新,通过简单的几张图,就把CSS Grid的几个核心介绍的非常清楚,我觉得很有必要拿出来与大家分享。

在继续下面的内容之前,再次感谢@Mirza Joldic的付出。那咱们就不说废话了,开始今天的学习之旅。

CSS Grid布局的介绍

学习CSS Grid布局更多的相关知识,我觉得通过一些工具会对大家的理解更有帮助,到目前为止,这方面的在线工具已经有很多种,比如:

下面的动图是使用@Mirza Joldic写的CSS Grid Playground小工具。动图来了:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/playing-with-css-grid-layout.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部