使用CSS Grid的九大误区

编辑推荐:诚征广告商金主入驻此广告位置,如有感兴趣的金主,欢迎邮件至:airenliao@gmail.com咨询相关合作事宜!!!(^_^)

如果你和我一样一直在关注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网站上的免费视频。不过需要正常观后的话,需要自备天梯。

接下来简单的看看这九个误区,以及相对应的一些资源,希望接下来的内容能更好的帮助大家理解这几个误区,以及增强这方面的知识点,更好的避开这些误区。

误区一:认为CSS Grid就是神

在《CSS布局指南》一文中已经提到过,对于Web的布局,它将是一个永恒的话题。如果你对布局相关的知识有所了解,你应该知道,在CSS Grid出来之前,所有的布局方案都是针对的。直到CSS Grid出来之后,才有了二维的布局。就在此时,CSS Grid布局能解决很多以前一直无法解决的布局方案。

就因为CSS Grid布局具有二维布局特性,造成了大家对CSS Grid的第一个误区:认为CSS Grid布局就是一神器,无所不能。事实上,这是一种对CSS Grid认识的误区。虽然CSS Grid布局能实现大部分的Web布局,但并不代表所有的布局都应该用CSS Grid来实现。正确的做法是:

在适当的项目采用适当的布局方案。

也因为这个误区,社区对这个现象有过很多的讨论,比如“Flexbox和Grid布局,哪个更好?”:

有关于这方面的讨论还可以阅读:

正因为这样的讨论,在社区有一个共识。在Web布局当中,我们应该根据实际情况:Flexbox和Grid布局结合在一起使用

特别是在Card组件方面的布局,把Flexbox和Grid结合在一起将更显优势:

另外一方面,哪所现在的布局效果大部分是规规矩矩的正方形,但在不久的将来,Web的布局将会实现类似于杂志的布局效果。面对这样的布局效果,CSS Grid就显得心有余而力不足。从这一方面来说,CSS Grid并不是像大家所说的,它是万能的。

对于要实现类似于杂志风格的布局,那么还是需要clip-pathmaskshape-outside相关的属性的结合 。特别是离不开shape-outside特性

误区二:只使用百分比设置尺寸大小

Web的布局并不是一直都是固定宽度水平居中的布局,很多时候是有自适应的布局。实现自适应(流式布局)布局,在大家的脑海中应该是使用百分比来实现布局。但在CSS Grid布局中,并非一尘不变。主要是因为在CSS Grid的布局中,可以使用min-contentmax-contentminmax()相关的特性:

有关于这方面的更详细的介绍还可以阅读下面相关的文章:

除此之外,还可以使用CSS Grid布局独有的fr单位。也可以帮助我们实现类似于百分比的布局:

有关于fr单位更多的介绍可以阅读:

误区三:需要断点

断点Web响应式设计中的一个概念。借用媒体查询在不同的断点处实现不一样的布局效果。因此,很多同学一直误以为,在CSS Grid布局中实现响应式布局也需要通过媒体查询来实现。而事实上并非如此。

CSS Grid布局中有“隐式”和“显式”网格线的概念,同时在CSS Grid布局中使用grid-template-columns: repeat(auto-fit, minmax(200px, fr))这样的代码,在不使用媒体查询的情况下就可以很轻易的实现响应式布局。

误区四:被网络线编号搞糊涂

在CSS Grid布局中,网格线编号是一个很重要的概念。很多时候实现布局,都会借助网格线来实现。特别是在控制Web元素放置在具体的位置的时候,就可以使用网格线编号的特性。

另外在CSS Grid布局中,对于网格线还有两个非常重要的概念,那就是隐式显式网格线的编号。另外在布局时,除了使用显式的网格线编号之外,还会根据你的布局区域,创建隐式网格线。也就是说,自动创建隐式网格线。

误区五:总是使用12列网格

十二列网格,最早出处应该是960gs网格系统。在众多CSS Framework系统中都源于960gs创建了自己的网格系统。估计也是因为这个原因,很多使用CSS Grid布局的同学都误以为,它是12列网格系统的一种变身,而事实并非如此。CSS Grid 布局是单独的一个CSS模块。除了具备12列网格系统的功能之外,还具有独特的网格特性。

误区六:忽略行的幂值

在网格布局中,总是脱离不开行的概念。一般情况下,四条边可以组成一个行,而且在一个行中有N个单元格。而在CSS Grid布局中,可以使用frminmax()max-contentauto组合在一起定义CSS Grid布局中的行。这样就可以让内容在不同的视窗大小实现较好的布局效果。从而将响应式设计提高到一个全新的水平。

另外,使用CSS Grid进行布局,在Web布局上可以真正的提供空白区域。这也正是行改变这一切的。

误区七:一个框架

刚才提到了CSS Framework中的网格系统。这也造成一个误区,CSS Grid布局就是一个框架,一个布局框架。事实上,CSS Grid布局除了具有CSS Framework中的网格系统特性之外,还具备其他特性。这些特性是网格系统无法达到的。因为CSS Grid布局是一个二维布局,而网格系统事实是一个一维布局。

误区八:等待IE11的消亡

任何一个CSS特性,很多同学惧怕使用的原因之一就是浏览器支持度。那么CSS Grid的布局同样面临这样的问题。其实,最早提出CSS Grid布局模块是微软提出的功能模板,只不过后面其他的浏览器支持力度更快,造成一个现实就是其他浏览器比IE更早的实现CSS Grid布局的特性。

面对不能支持的浏览器,对于前端的同学而言再正常不过了。对于CSS Grid布局也是类似的。你只需要按这七个方面去做,就可以解决相应的浏览器兼容问题。

误区九:犹豫不决

像CSS Grid布局这样的布局新技术使用得实现旧的设计更加容易。更令人兴奋的是,我们可以做一些新的事情 —— 把网页上的平面设计提升到一个新的高度。那么使用CSS Grid布局,可以让我重新创作,实现更为复杂而又有意义的布局。通过这样的方式来了解CSS Grid布局的特性,以此更好地理解它对设计的意义。

虽然CSS Grid布局非常的强大,但碍于一些实际上的原因,大部分人还在犹豫不决,惧怕浏览器的兼容性。就算是对这方面感兴趣的同学,现在也还只是的是着玩玩的心态。其实大家可以尝试着在自己的项目中使用CSS Grid来布局。比如@Jen就通过一个示例,一步步地指导你如何使用CSS Grid和一些其他的CSS特性,实现一个类似杂志风格的布局。

总结

这里简单的列了使用CSS Grid布局易于产生的误区。@Jen通过不同的视频向大家阐述了这些误区,而且在相应的视频中向大家介绍了如何避免这些陷阱和旧的习惯。视频中提到的一些建议和提示很值得我们大家花时间去学习和了解。如果你感兴趣,不信花时间去看看视频。如果你想了解更多的相关东西,建议你观看@Jen录制的一系列有关于布局相关的视频教程:CSS Layout Land

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:https://www.w3cplus.com/css/9-biggest-mistakes-with-css-grid.html

如需转载,烦请注明出处:https://www.w3cplus.com/css/9-biggest-mistakes-with-css-grid.html

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

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