个性化阅读
专注于IT技术分析

关于使用CSS Grid网格布局,9个严重的错误

CSS Grid响应式布局是不是很强大?是不是使用Grid就够了?总是将容器分成12份?我们是不是总是想等着兼容IE?。。。。。。

面对新的布局技术,我们都难免会犯一些错误,现在我们来谈谈一些在CSS Grid布局开发中常犯的错误,了解一下哪种开发方式更规范,规范的开发方式是技术进阶的基本方向。

1、认为使用CSS Grid就够了?

不少人可能会使用CSS Grid来代替Flexbox,或者代替float,因为它们显得又老又旧,出现好的工具意味着放弃旧的?在开发中总是会出现经典的两难选择,使用JavaScript还是TypeScript?使用自适应还是响应式?原生设计还是使用框架如Boostrap?答案是,都会用到!我们用boostrap也不能保证它提供的样式就足够了,我们仍然需要重新调整。CSS Grid也是CSS布局的一部分,总不能全部都是用Grid,因为有些场合它显得不太适合,比如元素组件对齐,使用Flexbox会更方便;如CSS形状,内容流围绕,我们仍然可以使用float。所以掌握所有布局才是最好的,相应的布局有它最适应的某一种开发场景。

2、仅仅使用百分比设置组件大小

关于自适应,仍然有不少人仅仅使用百分比来设置所有组件的大小,我们当然想我们的布局适应任何屏幕,给用户提供更友好的体验。在响应式设计里面,当你总是使用百分比来设置组件大小,空间小,组件占据的空间更小;空间大,组件占据的空间也更大。但是这样是不适合的,百分比不能友好地解决自适应,你可以了解或使用更多与自适应相关的东西,比如fr单位,minmax()函数,max-width,max-height,max-content,min-content等。实际上CSS Grid的grid-template-columns/rows允许你使用这值。

3、总是按比例切分容器

这在某些情况下,按比例切分当然没问题。开始我们使用百分比,现在我们可以按比例切分容器了,这跟使用百分比区别不大。它并不总是能让页面在每种屏幕下都能友好显示,其实我们有很多方法,可以使用min/max语法,或repeat,auto自动调整。我们在设计页面的时候需要注意使用的单位是不是太绝对了,多参考一些更灵活的设置方式,毕竟我们设计的页面最好的就是响应式了,响应式设计是最基本的方向了。

4、被数字搞混了

我们都习惯根据数字来设置行列或其它参数,更多的数字设置,回头检查代码可能就看不懂了,或者调试起来也困难。最基本的要会区分column和row,设置属性相关的英语看下它们的翻译会更好。有些程序员并不喜欢英语,可能使用拼音代替;或者看到column和row一时不知道什么意思,这都是不好的习惯。另外Grid是二维方向上的布局,多练习,熟练两个方向上的参数设置。

5、总是将容器分成12份

Bootstrap也是默认分为12列的,难道你能说它错了吗?没有错,但是当大家都使用12列来设计网页,那么这样就失去了创意。其它的设置仍然值得我们去尝试,我们也可以设置为7列,11列,13列,这样没有错,可能会得到更好的页面效果。在掌握基本内容后,关注这些细节是很有必要的,这也是技术进阶的方向。进阶的内容永远是细节,比如前端设计中我们可以学习排版原理,如何设计更好更有创意的排版;又如配色原理,不同的颜色也能有好看的页面,这些都是平时设计中的细节。

6、忽略了CSS Grid中的行的功能

我们总会首先想到定义列,可能已经这样很久了,Grid也是可以同时定义行的。如果不定义行,则所有行都将是自动高度,你有时可能只是想让内容排成这一行的高度,但是如果行内的组件元素高度不一,则这时候你就有必要处理行了。实际上Grid是二维的,我们最好都是让Grid处理二维的大布局范围,二维布局同时涉及两个方向,如果你只是使用一行,那么Flexbox可能更好,所以不要忘记行,让CSS Grid发挥更大的作用。

7、试图找一个框架

不少人总会百度一下,搜索最新的框架替换旧的框架。其实使用框架和使用CSS Grid或Flexbox区别并不大,最大的区别在于可以减少你的开发时间,而他们的实现都是基于CSS的原生核心布局的,比如一个提供Grid或Flexbox类似的框架,它的底层也是使用Grid或Flexbox实现的。

而使用框架的一个严重问题是,你可能会发现使用bootstrap的网站,你可以一下子都看得出来那是用bootstrap写的,这样如果你想要与众不同的界面,那么一个流行的框架或者不是最好的选择。

这要求你对CSS的几大核心布局都掌握好,如果你做到了,那么你自己可能也不会过度地去使用框架了。设计你自己的布局才是最好的布局。

8、等着IE11兼容?

又是IE?除了IE现在大部分浏览器都是支持CSS Grid的,未来会有更多浏览器支持,所以不要过于担心兼容性的问题。你也可以给IE提供一些支持,但是IE这样奇葩的存在,有些问题不能总是能同时解决的,你需要有所取舍。只需关心流行的浏览器对Grid的支持就行了,因为你面向的用户在小众的浏览器上的数量比较少。

9、要不要使用CSS Grid?还在犹豫中。。。

不用犹豫了,CSS Grid随着规范的更新,未来它发挥的作用更大,结合Flexbox一起使用吧,这两个布局基本能满足你页面设计中的多数场景了,包括响应式设计。

赞(0) 打赏
未经允许不得转载:srcmini » 关于使用CSS Grid网格布局,9个严重的错误
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏