锐客网

  1. 首页 > 睿知 > it技术 > >

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

前端IT知识css常见错误

【关于使用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一起使用吧，这两个布局基本能满足你页面设计中的多数场景了，包括响应式设计。

    推荐阅读


    上一篇：为什么在JavaScript中不推荐使用for…in（）

    下一篇：Flexbox与Grid布局大比拼，使用哪种布局更好（为什么？）