网站建设使用CSS Grid布局有哪些好处

浏览器支持

不采用Grid 的最常见原因是浏览器支持。虽然Grid在全球范围内拥有大约85％的浏览器支持，但其他15％的浏览器支持暂停。这些用户中有很大一部分是在IE上，从IE10开始，它实际上支持CSS Grid的旧语法。（我将留下你是否想在另一天支持旧语法的问题，但如果你想沿着这条路走下去，这里有一篇很好的文章。）这些用户需要的布局至少是可用。这让我想到了第二个问题……

时间

如果并非所有浏览器都支持CSS属性，则需要提供合适的回退。在单独使用单个属性的情况下（例如mix-blend-mode），编写额外的一行或两行可能相当简单，使用户仍能以有用（如果次优）的方式体验您的内容。这是渐进式增强。

使用像Grid这样的整个规范，如果您将其作为主要布局策略，它将不仅影响一个或两个元素，而且影响整个网页。所以这是一个略有不同的故事。您需要确保提供合适的后备，无论您使用哪种策略来支持旧版浏览器。我不会否认这有时需要一点时间。

如果您团队的其他成员还不熟悉Grid，那么在让每个人都熟悉新的布局策略时，还需要考虑时间因素。他们可能会对投资这项培训感到紧张，并让所有人离开现有项目一天左右。

可维护性

有些团队可能会担心，当团队中的其他人拿起你的项目进行工作时，他们会发现维护起来比较困难，因为你使用的是不熟悉的CSS，而不是X框架。与此相关，使用Grid构建布局有很多不同的方法。例如，如果一个人正在使用命名网格线而另一个人正在使用grid-template-areas它，那么它可能会产生相当不一致的代码库，并且对于需要重新接近该项目的任何人来说可能是一个令人头痛的问题。

所有这些原因归结为时间和金钱。我们需要做的是让您的团队相信Grid可以为两者提供帮助。

Grid如何帮助？

现在让我们看一下使用Grid如何帮助解决上述问题以及更多：

节省复杂布局的时间

网格极大地简化了以前需要大量黑客和填充的布局的过程。如果您需要使用较旧的布局方法破解复杂设计，那么您将浪费宝贵的时间。当然，您还需要为旧版浏览器提供可用的后备，但通常不需要花费大量时间。

如果您的团队使用较旧的布局技术编写自己的网格框架，那么这一切都需要时间和精力。

拥抱创造力

如果设计师，开发人员和团队想要突破界限并构建真正富有创意的现代布局，从人群中脱颖而出并拥抱网页设计思维的新时代，那么Grid就是其中不可或缺的一部分。Grid使我们能够构建以前用CSS无法实现的布局。

更好的性能

许多项目都是在网格系统的大型，笨重的CSS框架中导入的。即使是最小的类也可能最终添加了许多额外的类，这些都会增加CSS文件的重量。对于与“标准”列和行不同的复杂布局，您可能需要转向Javascript库。在我看来，我们几乎肯定不需要运送额外的JS来处理2019年的布局（除了极少数例外）。CSS Grid可以用很少的代码处理许多复杂的情况。

还有一些迹象表明，使用flexbox创建网格设计的性能较差 – 尽管我无法在相同级别的细节上找到更多资源。

更好的可维护性

因为Grid只是原生CSS，所以它不会有破坏的风险，你必须在一年的时间内重构你的项目。它本质上是稳定的。浏览器支持只会变得更强大。相反，依赖项会破坏项目。他们需要维护。您可能必须在一两年内重新访问一个项目，但却发现它使用的是不再主动维护的旧网格框架，或者您使用的版本已过时而您无法找到文档。众所周知的像Bootstrap这样的框架可能不太可能出现这个问题，但它们会带来性能权衡。

同样，投资您的团队学习网格是对未来的安全投资。它不是一个在几年内就会过时的框架，它的基础CSS仍然存在。这些技能将在未来许多年内发挥作用。

那么，你如何说服你的团队？

网站不必在所有浏览器中看起来都一样

我认为广泛采用Grid的最大障碍是网站在所有浏览器中看起来都一样的常见误解。不幸的是，情况可能是管理人员认为是这种情况，或者无法与客户沟通。没有人希望你的客户在运行IE9的古老吱吱作响的机器上打开你漂亮，闪亮的新网站，并立刻大吃一惊，它无法辜负设计。

这意味着您需要将案例提前进行渐进式增强，并帮助确保在更高级别进行通信。让管理人员和设计人员了解旧浏览器的局限性，以及实现设计在各地看起来相同的成本。这不应该是逐个项目的，而是整个组织的战略。

我知道改变整个组织的思维方式听起来有多难，而且不太可能在一夜之间发生。我看到的一个想法是设计师实际设计一个简化版面的网站版本，作为完全支持版本的后备版本呈现给客户端，就像它们呈现设计的移动和平板电脑版本一样。通过这种方式，客户端意识到某些浏览器将获得更简单的布局，并且没有什么大惊喜。此外，设计师实际上可以以一种看起来很好的方式设计它，而不是依赖于开发人员的解释。虽然不可避免地会涉及更多的设计时间，但在开发方面可以节省很多。我希望看到这种方法变得更加普遍。

试试看

你不具备全力以赴，与网格-它不一定是一个全有或全无的方法。引入Grid的最佳方法之一是从较小的UI模块开始。这样你就有机会在视觉上展示好处，并希望教育 – 或者至少激起你的其他团队成员的好奇心。展示而不是说出来通常更好。

使用网格与现有布局系统并没有什么不妥，而人们对此感到满意。这给了你下一部分的时间……

制定战略

正如我之前提到的，有很多方法可以在Grid中构建布局。您需要考虑您和您的团队将如何实施它，以确保一致性和可维护性不会成为问题。您可能会认为，一旦每个人都学会了基础知识，那么他们可以使用他们喜欢的任何方法来完成工作，或者您可能决定仅使用行号进行放置grid-template-areas，例如，避免混淆。您可能决定为最常见的布局需求创建一些实用程序类，或者您可能决定将网格代码与组件紧密耦合。

您还需要考虑您的浏览器支持策略。您是否应该在其中使用@supports并包装所有Grid代码，或者仅在严格要求的地方使用？做你的研究并提出一个计划。您的方法可能会随着时间的推移而发展，但您需要证明自己已经考虑过这个问题，以便为您的团队提供最顺畅的过渡。