使用CSS Grid的九大误区

发布于大漠

6 年前

如果你和我一样一直在关注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-path、mask和shape-outside相关的属性的结合。特别是离不开shape-outside特性。

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

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

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

除此之外，还可以使用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布局中，可以使用fr、minmax()、max-content和auto组合在一起定义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.fedev.cn/css/9-biggest-mistakes-with-css-grid.htmlnike air max 2019 soccer