高质量的用户界面是每一个商业网站都应该优化的组件之一，精心设计的界面可为用户提供直观高效的体验，从而让他们对品牌的认知产生积极影响。

 在当今的Web前端场景中，CSS是我们控制HTML内容格式和外观的有效方式，在这篇博客中，我们将讨论并比较两种有助于在页面上有效放置元素的布局模式（CSS Grid和Bootstrap）。我们还将对CSS Grid与Bootstrap进行详细比较，以便你可以在选择最适合的布局模式时做出明智的决定。

一、CSS Grid与Bootstrap：比较的基础

CSS Grid的灵感来自基于打印的“id”，而Bootstrap的网格系统基CSS Flexbox布局系统，Bootstrap直接与CSS Grid竞争，与CSS Grid的网格布局系统形成强烈对比。

在本博客的以下部分中，我们将尝试在CSS Grid和Bootstrap的Flexbox包装器之间进行一些强有力的比较。注意：以下任何对Bootstrap的引用都是指在Bootstrap中使用的网格系统。 

因此，作为一般规则，“内容输出”适用于Bootstrap，“布局输入”适用于CSS Grid。

如果我们想控制行或列方向的布局，那么我们应该选择Bootstrap的基于Flexbox的网格。另一方面，如果你希望对行和列进行布局控制，则应该选择CSS Grid。

二、CSS Grid与Bootstrap：详细比较

1.什么是CSS Grid？

CSS Grid是一种布局机制，可确保网站或应用程序的静态结构保持功能和可用性。它由行和列组成，以创建由单元格组成的有序列和行。在CSS Grid中，可以在行和列方向（即2D方向）控制内容。

CSS Grid Layout模块允许开发人员创建基于网格的布局，其中项目使用灵活的大小算法在网格容器中自动定位。自动放置算法通过利用可用空间、平衡内容消耗的空间量以及尽可能紧密地包装项目来有效地分配项目。这种方法提升了网站（或网络应用程序）的响应能力。

2.什么是Bootstrap Grid？

Bootstrap是一个免费开源的基于HTML、CSS和 JavaScript的工具包，用于开发简单易用的 Web组件。强大的网格系统允许任何设计人员/开发人员以简化的方式实现广泛的布局。

Bootstrap Grid系统建立在一个12列的布局上，响应迅速且超级灵活。它可用于创建从简单内容页面到复杂登录页面的任何内容。此外，基于Flexbox构建的模块系统允许开发人员创建响应不同屏幕尺寸的布局。

3.CSS Grid和Bootstrap Grid如何工作？

CSS Grid将网站空间划分为行和列，可以通过指定像素或可用空间的方式分配给指定部分，以固定宽度分配这些空间。使用CSS Grid，你可以创建适用于任何屏幕尺寸的灵活布局。

在Flexbox或Bootstrap Grid系统中，控件仅在1维中使用，即父行或弹性线的方向可以被项目所控制，空间分布发生在跨弹性线（行）。在这里，每个新行都是flex容器中的一个新flex行。

3.1 Flexbox中的1D控件

HTML

CSS

输出

在上面的代码中，子div根据屏幕大小在屏幕上进行调整。如果我们减小屏幕尺寸，那么内容将在下一个flex行显示，这是由于我们将flex-wrap设置为“wrap”所导致的结果。所以，如果我们想让元素排列起来，那么我们就需要CSS Grid提供的2D维度控制。在这里，我们能够知道一行中可以有多少个max元素，并且当我们压缩屏幕时，这些元素不会变少。这也可以通过使用CSS Grid中的自动流选项来控制。

3.2 CSS Grid中的2D控件

HTML

CSS

输出

如果我们想将内容精确地放置在页面上，那么选择CSS Grid的效果会更好，但是如果我们着重考虑布局的灵活性，那么我们应该选择Bootstrap。在Bootstrap中，很难预测某些断点或视口处的行为，并且用户最终可能会得到意想不到的布局结果。

CSS Grid还有助于制作不寻常、不对称和重叠的内容。我们当然可以在Bootstrap中使用 z-index来放置重叠的内容。但是，使用Bootstrap控制内容的不对称和重叠有点困难。在CSS Grid中，我们可以控制每个重叠内容的开始列和结束列，并创建特定的布局设计。

CSS Grid使用“fr”（分数单位，可用屏幕空间的一个单位）来定义每个网格行元素应采用的空间限制（如上例所示）。另一方面，Bootstrap在其网格中使用列系统来定义每列在一行中所占的空间。

Bootstrap最多可以容纳一行12列，这些列也可以根据视口进行组合，以更好地控制最终用户体验。

CSS Grid和Bootstrap都为用户提供响应式设计。但是CSS Grid没有预定义的网格断点，而 Bootstrap具有基于最小宽度媒体查询的预定义断点，这意味着它们适用于该断点及其上方的所有断点。

• Bootstrap 的响应断点如下：

a. 宽度< 576 px被称为特小(xs)；

b. 宽度>= 576 px被称为小(sm)；

c. 宽度>= 768 px被称为中等(md)；

d. 宽度>= 992被称为大(lg)；

e. 宽度>= 1200 px被称为特大(xl)；

• 可以通过更改Bootstrap的sass文件中的$grid-breakpoints和$container-max-widths属性值来更新网格层（数量和宽度断点）。

3.3 Bootstrap中的列系统和网格断点

• col-*用于额外的小屏幕；

• col-sm-* 用于小屏幕；

• col-md-*用于中等屏幕；

• col-lg-* 用于大屏幕；

• col-xl-*用于超大屏幕；

中屏输出

小屏输出

在Bootstrap中，列宽总是以相对于flex容器的百分比指定。而在CSS Grid中，允许内容根据其要求占用空间，或者使用“fr”（小数单位）来控制放置在一行中的最小-最大列数。

我们应该始终考虑使用CSS Grid，首先是因为CSS Grid为我们提供了更多的控制权。其次，如果我们可以很好地控制元素的放置，我们就会放弃flexbox的灵活性。CSS Grid通过使用诸如 minmax()和小数单位之类的函数，使我们能够更好地控制元素。同样，算法布局主要是使用CSS Grid实现的。

Bootstrap是前端设计的框架，而CSS Grid是CSS的原生模块，因此不需要额外的模块导入。这大大节省了构建项目的时间。

为了实现相同的目标或布局，与CSS Grid相比，我们最终可能会在Bootstrap的情况下编写更多的标记。为了使设计具有响应性并针对不同的视口量身定制，我们必须明确网格的大小。在CSS Grid的情况下，我们可以通过使用算法布局来控制这种行为，因为这需要的代码量或标记量更少。

四、CSS Grid与Bootstrap：相似之处

CSS Grid和Bootstrap也有一些相似之处：

• 系统都允许我们明确地对网格项进行排序，并且网格项的源顺序无关紧要；

• 我们可以使用justify-item/self-*、align-item/self-*关键字来控制行中网格项和列单元格（网格线内的列）的对齐方式。

五、CSS Grid与Bootstrap：浏览器支持和兼容性

CSS Grid之所以难以广泛普及是因为跨浏览器兼容性差，直到2017年，CSS Grid还只有 Google Chrome和Firefox支持，而Internet Explorer、Microsoft Edge、Opera，甚至Safari都没有提供对CSS Grid的浏览器支持。但是，自2017年以来，CSS Grid在浏览器支持方面取得了进一步的改进。

六、结论

美观的网页布局不仅可以提升网站网页收录的速度，而且还有助于改进用户体验，CSS Grid与Bootstrap都是网页排版布局的主流工具，赶快运用这两个工具为你的网站添彩吧！

 参考文章：https://www.lambdatest.com/blog/css-grid-vs-bootstrap/