“ CSS网格还是CSS框架？Web开发人员经常问这个问题，特别是在将新的CSS Grid布局引入后，这个问题经常被Web开发人员问到。CSS网格布局允许开发人员仅通过使用本机CSS属性即可构建具有绝对控制权的自定义复杂布局，而无需依赖任何框架，这些框架受困扰于默认样式规则的12列基本网格布局的约束，并且没有很大的自定义空间。另一方面，使用Bootstrap之类的框架构建网格布局感觉很轻松，而无需编写任何CSS样式规则或媒体查询来使布局响应。

最初，当引入CSS Grid布局时，它缺乏跨浏览器的兼容性，这使许多Web开发人员对其实现有些犹豫，但现在情况并非如此！这就给我们带来了一个问题，即我们如何评估CSS网格布局是否消除了使用Bootstrap之类的CSS框架创建布局的需求？

 

不用担心 如果您自己遇到过此类问题，那么您来对地方了。这篇文章就是关于这个的。我将重点介绍CSS Grid与CSS Framework之间的差异。我们还将考虑这两者之间的跨浏览器兼容性。到本文结尾，您将能够对在CSS Grid或CSS Framework中的下一个选择做出判断。让我们用这两个基本定义上路！

什么是CSS框架？

CSS框架也可互换地称为CSS库。基本目的是为Web开发带来更加标准化的实践。使用CSS框架或CSS库，由于可以使用预定义的Web元素，因此可以快速跟踪Web开发工作。意思是，如果您希望为Web应用程序添加UI元素，那么您要做的就是在项目中包括框架CSS和JS文件，并为要设置样式的元素指定HTML类。CSS框架就是这样工作的。

几乎每个CSS框架都有一个网格，很少有提供更多的网格，很少有CSS框架甚至提供围绕交互式UI模式的高级JavaScript功能。

为了明确起见，我们可以举一个Bootstrap框架的示例为例，我认为它是最著名的CSS框架之一。

 

Bootstrap是一个开源CSS框架，位于GitHub上，可用于UI开发CSS基本组件。您可以使用Bootstrap更改按钮，字体和更多样式。

让我们举个例子，假设您必须为网站定义一个圆形的按钮，现在不用编写新的代码，而可以利用CSS框架（例如Bootstrap）为您希望的按钮提供一个已经定义的代码具有。

要在您的网站上显示以上按钮，您需要做的就是复制以下HTML代码并将其粘贴到您的Web应用程序项目中，当然，您将必须根据需要指定按钮文本，其余的全部照顾！

阅读更多：十大Bootstrap主题

CSS框架为开发人员的项目提供了很大的灵活性，并节省了大量时间。这样，他们可以在框架的帮助下开发出更令人赏心悦目的东西，而无需从头开始编写所有内容，而不必担心任何跨浏览器问题或不一致之处。

与Bootstrap相似，还有许多其他CSS框架或CSS库

• 基础
• 骨架
• 苏西
• 纯

顶级18个免费CSS3框架来构建快速的轻量级网站

CSS框架的跨浏览器兼容性

跨浏览器兼容性是Web开发人员每天都要面对的头疼问题。随着浏览器开发的如此巨大的进步，开发提供统一的跨浏览器体验的网页的需求日益增长。

所有人都使用Safari和Internet Explorer的日子已经一去不复返了。Google浏览器，Mozilla Firefox，Opera等许多其他浏览器都席卷了互联网，如果我们提到浏览器市场份额，它们比Internet Explorer更受人们的喜爱。数以百万计的人喜欢使用不同的浏览器，每个浏览器公司都致力于与众不同。这就是它被人们所喜爱的原因。这加剧了由跨浏览器兼容性引起的麻烦。

CSS框架为您减轻了负担。没有为单个浏览器编码框架。如果是这样，您认为它会如何流行？不会的 框架开发人员已经知道，数百万人将使用它，而没人知道。因此，这些框架是中立的，可以解决跨浏览器的兼容性问题。使用该框架时，您可以只关注网站的设计和创意部分。

但是请记住，无论您使用哪个CSS框架，以及它与跨浏览器的兼容程度如何。始终建议您跨不同的浏览器对Web应用程序执行端到端集成测试。该过程称为跨浏览器测试，您可以使用在线跨浏览器测试工具LambdaTest在2000多种真实浏览器上实时执行该过程。您甚至可以使用我们的在线Selenium Grid 执行Selenium自动化测试。

 

使用CSS框架的好处

代码维护： CSS框架有助于简化代码维护。一旦开发了代码，也许网站也已经发布，就需要代码维护。我们经常更改代码并添加或修改某些元素的功能或完善网站。在这种情况下，我们需要维护代码。维护是不影响网站中要求恒定的部分的过程。由于框架减少了代码并在代码中引入了固定的符号，因此维护代码总是很容易的。

一致性和均匀性：显而易见，当您预先定义了自己的规则和功能时，就会将这些东西应用到全球各地。当您在CSS中使用框架时，也会发生同样的事情。框架具有预定义的功能以使用其功能。如果要使用框架的特定功能，则无论您身处何处，都必须使用相同的功能。这在代码中创建了一致性。在整个项目中，代码是一致且统一的，并且同一项目可以由坐在地理区域中不同位置的人员来完成。这种一致性和统一性有助于开发人员理解代码并节省大量时间。这是开发人员不尝试开发自己的代码或功能，而是尝试使用现有的代码或功能并根据自己进行修改的主要原因之一。每个人都比较容易。

快速交货：这一点很隐含，您必须已经在脑海中猜到了。使用框架可以节省您的项目建设大量时间，因此交付速度非常快。通过使用所需的预定义功能可以节省时间。让我给你一个简单的例子，向您展示同样的情况。您是开发人员，并且已获得开发项目。一个项目，您可以在其中将文本写在框中（最好带有圆角），并可以使用工具提示描述其含义。现在，如果您使用的是称为Bootstrap的CSS框架，则可以在5分钟内完成这些操作。但是您想使用自己的代码。因此，您开始开发。保留圆角按钮。开发工具提示功能时，您肯定需要花费很多时间和精力。这将不必要地将您的时间增加很多倍。另外，请记住，这是一个完整的项目，而不是一个借口即可脱离的网页。您的项目将包含许多这样的功能，如果您使用框架，那么这些功能仅仅是一项工作。另一方面，您的客户不会有任何影响，也不会在乎您使用什么。无论使用框架还是使用自己的代码，工具提示都是工具提示，这对客户端很重要。因此，最好使用框架来节省时间并快速交付。您的客户不会有任何影响，也不会在乎您使用什么。无论使用框架还是使用自己的代码，工具提示都是工具提示，这对客户端很重要。因此，最好使用框架来节省时间并快速交付。您的客户不会有任何影响，也不会在乎您使用什么。无论使用框架还是使用自己的代码，工具提示都是工具提示，这对客户端很重要。因此，最好使用框架来节省时间并快速交付。

广大社区：与CSS Grid相比，CSS框架从其庞大的社区中获得了巨大的优势。这些社区的建立是由于框架的用户众多，而且框架已经存在了很长时间。随着用户数量的增长，人们面临的问题也越来越多。这些人可以与互联网上已经解决了该问题的其他人联系，或者过去已经与其他人联系并仅知道解决方案。这条链不断。此过程增加了使用框架的用户数量。很明显，如果我给您一个选择，可以选择哪些可以提供巨大的支持，哪些可以提供中等的支持；您将倾向于巨大的支持之一。此支持可帮助您克服遇到的任何障碍，并尝试自己的东西。您将拥有大量知识渊博并愿意提供支持的人员。

框架不是新的： 框架不是新的。自从那时的开发人员遇到这个问题以来，它们就存在了，这个问题一遍又一遍地重复。他们开发了可以供许多人和全球任何人使用的框架。CSS Grid不太旧。当人们开始使用网格的方式过多时，还是在我说框架的需求过多时，就遇到了框架。这两个概念的年代都很重要。由于框架是在网格之前开始的，因此使用框架的项目数量更多。即使用于构建网格。这些项目中有很多已经完成，但是许多项目在交付或发布后仍在继续。这是因为始终存在修改或改进的范围。您可能会开始向网站添加新功能，或者将较旧的功能修改为漂亮的外观。如果您的项目很受欢迎，那么您一定会坚持下去。这些项目使用了框架，如果有新手在从事框架工作，他将习惯这些框架。也许他将在接下来的项目中使用相同的内容。这增加了框架的使用，并且一切都可以连接。有关框架的项目越多，参与该框架的人员越多，社区越广，框架越好。

资料：已经开发的CSS框架包含有助于学习如何有效使用框架的文档。这个过程被低估了，但是非常重要，因为在开发文档时会花费很多时间。考虑您没有使用这些框架，但是对开发自己的框架更感兴趣。一个框架完成了；您还需要文档来教大家框架如何工作。如果您打算将框架作为开放源代码上传到Internet上或供其他人使用，则您需要一些平台来告诉他们该框架是如何工作的。这是方便使用文档的地方，当我们学习新框架时，这些文档通常是理所当然的。一旦找到新框架，我们将立即导航至文档以对其进行了解。这是一个基本步骤，但是当涉及到我们自己的文档时，我们知道它的重要性。而且，这些文档需要在框架更新时进行更新。创建文档在开始时可能会有些痛苦，但是会提供很多帮助，从长远来看，使您的工作更加轻松。因此，总的来说，拥有文档实际上可以美化框架及其用法。

CSS框架的缺点

使您以自己的方式工作：框架将限制您的编码方式和工作方式。我们为每个人构建了一个讨论的框架，并牢记那里的每个开发人员。这限制了您应该工作或可以工作的方式。现在，您需要按照框架希望您的工作方式进行工作。这包括设计部分。您无法设计自己脑海中想的东西。您需要使用已经构建了该部分的框架类。这可以是按钮，简单的布局或任何您想要的东西。可以说，是的，您可以通过在框架顶部进行编码来更改事物，但是，当您必须在框架之上使用太多内容时，使用框架有什么意义呢？这产生了统一的网站，我们将在下一个讨论中讨论。

统一网站： 使用框架限制了设计设计中的小元素所需的方式。使用框架的类将或多或少地为您提供每个元素相同的结构。由于每个大元素都是许多小元素的组合，因此大元素变成相同的结构。这使得两个网站使用相同的框架统一。不完全是，但您可以通过查看结构轻松分辨。统一的网站对于网站开发人员总是一件坏事。直到并且除非您拥有一个强制访问量的网站，例如某些大学录取网站或政府网站，否则您需要具有不同的吸引力。对用户的第一印象始终是网站的结构及其显示方式。

迫使您学习新的框架：在以上各节中，我提到了当今市场上有许多可用于CSS的框架。我在这篇文章的开头列出了一些。现在很明显，每个框架在其自身方式上都是不同的。与我们市场上的不同浏览器相似。既然有这么多框架，很明显，您必须拥有自己喜欢的框架，并且已经使用了一段时间。当您的客户希望您使用其他框架时，这会产生问题。这意味着他希望使用您不了解的其他框架来开发他的项目。现在，您只需要为一个项目学习一个全新的框架，也许您将永远不会再使用该框架。对于开发人员来说这是浪费时间，但是没有选择。

什么时候应该使用CSS框架？

如果您是前端Web开发的初学者并且尚未掌握CSS，那么使用CSS框架是您的理想选择。像Bootstrap这样的框架非常易于掌握，并且可以在几秒钟内创建完整的Web页面布局，而无需编写任何CSS代码。CSS框架具有空前的易用性，闪电般的快速部署，接近100％的跨浏览器支持，代码库的标准化以及易于学习的曲线，因此CSS框架对于您来说是一个有吸引力的选择。如果您打算以闪电般的速度构建标准的跨浏览器兼容布局，而不是复杂的尖端布局，则应在CSS网格上选择CSS框架。

而且，像Materialize或Bootstrap这样的CSS框架比Grid系统要多得多。事实上，网格只是CSS框架的一个很小的功能。如果要以最小的CSS样式以闪电般的速度构建不同的UI组件（如导航栏，轮播，滑块，卡片，手风琴，标签，弹出窗口，模式，按钮等），则应使用CSS框架。

现在，我们对CSS框架有了一个很好的了解！现在该讨论CSS网格布局了。

什么是CSS网格布局？

 

CSS网格是一种在您的网页上使用网格的布局技术。这是一种仅在CSS中而不是HTML中描述的技术。因此，为了满足Web开发人员的需求，CSS网格使开发复杂且扭曲的响应式Web设计变得容易。如果您是Web开发人员或Web测试人员，那么您已经知道响应式网站的相关性。在开始下一个Web项目之前，请确保避免响应式Web设计中的这些头号错误。

一个简单的CSS Grid示例如下所示：

厦门网站建设

Src：https：//gridbyexample.com/examples/example13 /

上图显示了网页的不同元素（如页眉，边栏等）的不同网格。

如您所见，CSS Grid可以根据Web开发人员帮助调整元素。选择CSS Grid vs CSS Frameworks可以使您在很短的时间内交付包含很多表的复杂Web应用程序。

尽管CSS Grid无法与CSS框架的多功能性相提并论，但有时开发人员不得不为一个特定项目或项目的某些部分考虑两者。CSS Grid的发展比扩展其功能之前要好。考虑到您必须构建一个外观吸引人的布局，因此选择CSS Grid非常容易。使用CSS Grid布局，可以最大程度地减少工作量和布局复杂性。因此，如果您以后需要随时更改结构，则其他结构不会受到更大的影响。

例如，假设您有两个并排的网格，并且在同一平面中的网格之后有一个图像。现在，将来，如果要在同一平面上添加另一个网格，CSS Grid将在不影响图像坐标的情况下平均划分所需的空间。

网格非常适合分配给它们的空间。它帮助元素永远不会重叠或造成某些布局问题。

CSS网格布局的优点

构建复杂的2D网格系统： 如果您需要构建复杂的二维布局，而Bootstrap等流行框架无法提供这种功能，则使用CSS Grid vs CSS框架是理想的选择。如果不使用CSS网格，则无法构建诸如Mosaic Photo Gallery或Masonry Layouts之类的复杂布局。大多数CSS框架都提供基本的12列响应式网格，其有限的应用程序不适合现代的前沿设计。

减小的代码大小：使用CSS网格而不是CSS框架的另一个主要优点是减少了代码大小。使用CSS Grid，您只能依靠本机CSS样式规则来构建可想象的任何形式的网格布局系统。另一方面，为了使用CSS框架实现Grid布局，必须将整个框架/库CSS文件链接到您的项目。这是一个不必要的过时软件，它将增加您的项目规模并降低网站的加载速度。因此，当用户访问您的网站时，会在网页加载之前从服务器中获取框架/库文件的完整列表以及其他资源。这将大大增加您网站的加载时间，并损害SERP的SEO排名和较高的跳出率。与框架不同，CSS网格不需要任何外部样式表即可工作。

布局不受影响：网页包含许多元素。这些小元素组合在一起形成网页的布局。布局就是您所看到的以及您如何看到的。例如，我并排放置了两个图像，并在其旁边放置了一个移动新闻栏。现在这里有三个元素，它们位于布局之下。现在，如果我想更改第一张图片的大小，则新闻栏可能会移至下一行。这将移动下一行中存在的元素，并且整个布局都会受到影响。由于更改元素的布局在Web开发中非常普遍，因此这可以随时发生。CSS Grids在这方面有所帮助。当我们使用CSS网格时，我们在开发后所做的更改不会影响网站的布局。现在，我有了一个CSS网格，而不是图像，然后更改了网格的大小，之后，

更快的开发：框架庞大而繁重，而网格则短暂而轻巧。它们简单易学。框架内部有很多东西。您网站的完整框架。这些东西通常是相互关联的。一个好的框架用户将使用所有这些来开发一些独特的东西，因为框架的单调布局经常被指责为框架。这将花费一些时间，如果有的话，这会增加项目的时间限制。网格不是这种情况。与框架相比，网格非常轻巧，包含的概念很少。您可以轻松地克服网格中的概念并开始开发。开发网格没有复杂性。您不需要具有彼此链接的不同元素。网格不会给出单调的布局。这完全取决于开发人员。因此，

CSS网格布局的缺点

开发： CSS Grids尚未以开发框架的方式进行开发。这是因为网格是相当新的，并且许多项目在网格出现之前就已经开始。这意味着，如果您正在从事该项目（在公司或开放源代码中），则势必会偏向于框架。如果您足够了解某些知识，那么您一定会尝试实现该知识。很少完全不了解框架的情况下开始使用CSS网格的情况。但是，网格在新项目中越来越受欢迎。自从网格投放市场以来，已经使用了一段时间。如果将我与宏伟的框架进行比较，它仍然是网格的开始，但是很快它将成为开发中更加集中的主题。

如我所说，CSS Grid和CSS Framework是CSS的两个非常重要的方面。尽管有些人肯定会使用CSS框架，但有些人肯定会使用CSS网格。也有一些人根据需要决定要前进的方向。既然我们看到了网格的一些好处，那么让我们看看CSS框架的好处。

CSS网格的跨浏览器兼容性

CSS Grid在Web开发人员社区更广泛采用的道路上面临的最大障碍是其跨浏览器兼容性和支持差。直到2017年之前的几年，CSS网格仅受Google Chrome和Firefox支持，而Internet Explorer，Microsoft Edge，Opera甚至Safari均未提供对CSS网格的浏览器支持。在生产就绪型代码中使用CSS网格将意味着要么仍在使用旧的浏览器，混乱且残破的网页来服务于庞大的用户群，要么浪费大量时间来编写可行的float / flexbox后备代码。这就是为什么大多数开发人员都坚持使用基于Float或Flexbox的网格布局，或者依赖于Bootstrap，Materialize或Bulma等CSS框架来创建12列网格布局的原因。

但是，自2017年以来，CSS Grid见证了浏览器支持的巨大改进。这完全侵蚀了CSS框架以前享有的主要优势。截至2019年11月，93.85％的浏览器支持CSS网格（我可以使用统计信息）吗？以前不受支持的浏览器，例如IE（v10-11），Edge（v16 +），Opera（v44 +）和Safari（v10.1 +）现在支持CSS网格，包括适用于android和iOS的移动浏览器。

什么时候应该使用CSS网格？

反对使用Bootstrap，Materialize或Bulma等CSS框架的最大争议之一是过多的代码膨胀。大量不必要的CSS样式规则将永远不会被使用，这会拖累您的项目。如果您想保持网站紧凑以提高加载速度和性能，则CSS Grid是更好的选择。在CSS框架上选择CSS网格的另一个原因是，使用引导程序之类的框架，您将陷入原始的12列网格系统。实现5或7或9列的布局将非常困难。CSS网格完全消除了此问题。如果您的项目需要高度自定义的布局，而基本的12 col网格无法实现，则CSS网格非常适合您的需求。支持CSS网格的第三个论点是，它为您提供了无与伦比的灵活性来重新排列节/区域。使用CSS框架网格系统，您只能根据屏幕尺寸实现基本的响应式布局更改。但是CSS Grid提供了更强大的灵活性，可以在水平和垂直方向上完成更改布局结构。例如–将水平的垂直侧边栏菜单从一侧移到顶部。您可能要在CSS框架上选择CSS网格的最终原因是，丑陋的HTML标记会随着不断增长的Class名称和div标签而喘息，这会使您的HTML代码混乱且难以阅读。使用CSS网格，您的HTML标记将保持不变。例如–将水平的垂直侧边栏菜单从一侧移到顶部。您可能要在CSS框架上选择CSS网格的最终原因是，丑陋的HTML标记会随着不断增长的Class名称和div标签而喘息，这会使您的HTML代码混乱且难以阅读。使用CSS网格，您的HTML标记将保持不变。例如–将水平的垂直侧边栏菜单从一侧移到顶部。您可能要在CSS框架上选择CSS网格的最终原因是，丑陋的HTML标记会随着不断增长的Class名称和div标签而喘息，这会使您的HTML代码混乱且难以阅读。使用CSS网格，您的HTML标记将保持不变。

CSS网格与CSS框架的未来

许多习惯于使用框架和网格的开发人员都会想到这个问题。

自从与跨浏览器兼容以来，CSS网格一直在不断普及。网格也在进行重大开发，并引入了CSS Subgrid。与常规的CSS网格布局相比，这将为您提供所需的网站开发，粒度更细，通过改进的CSS设计可以使网站更好，更轻便。但是，到目前为止，CSS Subgrid的跨浏览器兼容性并不理想。

但是，如果CSS网格布局被各种浏览器接受，那么自然会相信CSS Subgrid不会太长。严格的CSS Grid布局用户希望CSS Subgrid尽快与跨浏览器兼容。

到目前为止，许多大型公司都在采用CSS框架。原因是它的受欢迎程度。CSS框架非常流行，由于节省时间和精力，如今大多数开发人员都在使用它们。但是，由于引入了CSS Subgrids，CSS框架的未来看起来有些严峻。但是，到目前为止，Web开发人员正在开发重量轻得多的框架，并且有可能根据用途更改网站的布局。

CSS框架的严格用户认为CSS Grid应该会分解为CSS框架的一部分。尽管许多人对此表示同意，但挑战在于框架的权重将大大增加，而我们希望减少这一点。但是未来只能在未来看到，我们将看到这两条道路在未来几年会合并还是分叉。无论情况如何，我都会在这里为您提供更新。