CSS 网格布局与 CSS 框架：何时使用哪种布局？

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

“CSS Grid 还是 CSS 框架？我的下一个项目应该用哪个？”这是 Web 开发人员经常会问的问题，尤其是那些刚接触 CSS Grid 布局的新手。CSS Grid 布局允许开发人员仅使用原生 CSS 属性即可构建具有绝对控制权的自定义复杂布局，而无需依赖任何框架。框架受限于基本的 12 列网格布局，这些布局充斥着默认样式规则，并且自定义空间有限。

另一方面，使用 Bootstrap 等框架构建网格布局感觉非常轻松，无需编写任何CSS 样式规则或媒体查询即可使布局具有响应性。

什么是 CSS 框架？
CSS 框架也称为 CSS 库。其基本目的是为 Web 开发带来更标准化的实践。使用 CSS 框架或 CSS 库可以加快 Web 开发速度，因为它允许您使用预定义的 Web 元素。也就是说，如果您想为 Web 应用程序添加一个 UI 元素，只需将框架的 CSS 和 JS 文件包含到您的项目中，并指定要设置样式的元素的 HTML 类即可。这就是 CSS 框架的工作原理。

几乎每个 CSS 框架都有网格系统，但很少有框架能提供多种网格系统，甚至很少有 CSS 框架提供围绕交互式 UI 模式的高级 JavaScript 函数。

为了更清楚地说明这一点，我们可以以 Bootstrap 框架为例，在我看来，它是最著名的 CSS 框架之一。

CSS框架的跨浏览器兼容性 跨
浏览器兼容性是Web开发人员每天都要面对的难题。随着浏览器技术的飞速发展，开发能够提供统一跨浏览器体验的网页的需求也日益增长。

过去那种人人都用Safari和Internet Explorer的日子已经一去不复返了。如今，谷歌Chrome、Mozilla Firefox、Opera等众多浏览器席卷互联网，风靡一时。数以百万计的用户偏爱不同的浏览器，而每款浏览器都力求与众不同。

CSS框架可以帮你减轻这种负担。框架并非针对单一浏览器编写。如果真是如此，你觉得它如何才能流行起来？框架开发者深知，它将被数百万使用各种不同浏览器的用户所使用。因此，框架是中立的，能够解决跨浏览器兼容性问题。使用框架时，你可以专注于网站的设计和创意部分。

不过请记住，无论您使用哪个CSS 框架，也无论其跨浏览器兼容性有多好，始终建议对 Web 应用程序在不同浏览器上进行端到端集成测试。

何时应该使用 CSS 框架？
如果您是前端 Web 开发新手，尚未掌握 CSS，那么使用 CSS 框架非常适合您。像 Bootstrap 这样的框架非常容易上手，无需编写任何 CSS 代码，即可在几秒钟内创建完整的网页布局。

CSS框架拥有前所未有的易用性、闪电般的部署速度、近乎100%的跨浏览器兼容性、标准化的代码库以及平缓的学习曲线，使其成为极具吸引力的选择。如果您旨在快速构建标准的、跨浏览器兼容的布局，而非复杂的前沿布局，那么CSS框架比CSS Grid更适合您。

此外，像 Materialize 或 Bootstrap 这样的 CSS 框架远不止是网格系统。事实上，网格只是 CSS 框架的一小部分功能。如果您想以最快的速度构建各种 UI 组件，例如导航栏、轮播图、滑块、卡片、手风琴、标签页、弹出窗口、模态框、按钮等等，并且尽可能减少 CSS 样式的使用，那么您应该使用 CSS 框架。

现在我们已经对CSS框架有了很好的了解！接下来是时候深入探讨CSS网格布局了。

什么是CSS Grid？

CSS Grid 是一种用于在网页上创建网格的布局技术。这项技术仅在 CSS 中定义，而 HTML 中没有定义。因此，为了满足 Web 开发人员的需求，CSS Grid 简化了复杂且响应式网页的开发。如果您是 Web 开发人员或 Web 测试人员，那么您一定了解响应式网站的重要性。

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

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

虽然 CSS Grid 无法与 CSS 框架的多功能性相媲美，但有时开发人员必须考虑在某个特定项目或项目的某些部分中使用这两种方法。

考虑到你需要构建一个视觉上吸引人的布局，使用 CSS Grid 会非常简单。CSS Grid 可以最大限度地减少工作量和布局的复杂性。因此，即使之后需要更改结构，其他结构也不会受到太大影响。

例如，假设你有两个并排的网格，网格后面是一张图片，它们位于同一平面上。将来，如果你想在同一平面上添加另一个网格，CSS Grid 会将所需的空间平均分配，而不会影响图片的坐标。

网格系统对分配的空间具有很强的适应性。它有助于避免元素重叠或产生某些布局问题。

CSS Grid 的跨浏览器兼容性：
CSS Grid 在被 Web 开发者社区广泛采用的过程中面临的最大障碍是其较差的跨浏览器兼容性和支持。直到 2017 年，CS​​S Grid 仅受 Google Chrome 和 Firefox 支持。

在生产环境中使用 CSS Grid 意味着要么要服务于庞大的用户群体，而这些用户仍然在使用老旧浏览器混乱且漏洞百出的网页；要么要花费数小时来编写可行的浮动/弹性布局替代方案。正因如此，大多数开发者只能选择使用基于浮动或弹性布局的网格布局，或者依赖 Bootstrap、Materialize 或 Bulma 等 CSS 框架来创建 12 列网格布局。这正是 CSS 框架相对于 CSS Grid 的关键优势所在，也是它们持续占据主导地位的原因。

然而，自 2017 年以来，CSS Grid 的浏览器支持率有了显著提升。这彻底削弱了 CSS 框架此前享有的关键优势。截至 2019 年 11 月，CSS Grid 已获得 93.85% 的浏览器支持。此前不支持 CSS Grid 的浏览器，例如 IE（v10-11）、Edge（v16+）、Opera（v44+）和 Safari（v10.1+），现在也都支持 CSS Grid，包括 Android 和 iOS 的移动浏览器。

何时应该使用 CSS Grid？
反对使用 CSS 框架（例如 Bootstrap、Materialize 或 Bulma）的最大理由之一是代码臃肿——引入大量永远不会用到的不必要的 CSS 样式规则会拖慢项目速度。如果您希望保持网站体积小巧，从而提升加载速度和性能，那么 CSS Grid 是更好的选择。

选择 CSS Grid 而非 CSS 框架的另一个原因是，像 Bootstrap 这样的框架只能使用基本的 12 列网格系统。要实现 5 列、7 列或 9 列布局将非常困难。而 CSS Grid 则完全解决了这个问题。如果您的项目需要高度自定义的布局，而基本的 12 列网格无法满足需求，那么 CSS Grid 正是您所需要的。CSS Grid 的第三个优势在于，它提供了无与伦比的灵活性，可以重新排列各个部分/区域。