CSS自挪威HåCSS现在是现代web开发的三大基石之一，另外两个是HTML和JavaScript。从格式化文档的简单语言到设计web应用程序的通用工具，CSS彻底改变了我们构建网站和web应用程序的方式。这些年来，它的特点和能力都有所提高。毫无疑问，CSS布局最大的改变者是CSS网格。然后是bootstrap，它很快成为web上响应性最好的开源前端框架之一。那么，您应该使用CSS网格还是引导？让我们看看哪个更好。

什么是css网格(css grid)？

cssgridlayoutmodel，简称cssgrid，是一个强大的布局系统，它使用一个二维网格来定义多个布局区域，只需使用少量CSS规则。毫无疑问，网格是CSS布局的最大改变者，它能够以更高的可预测性和更少的代码完成您以前所做的一切。有了网格，你就可以做以前做不到的事情。网格真正改变了你设计网站的方式，提供了一种灵活的方式，只需CSS就可以改变元素的位置，甚至不需要改变HTML。使用Grid，您可以显式地定义行和列的大小和数量，也可以让浏览器决定行和列的数量。您还可以将每个项目放置到特定的区域或单元格中，也可以使用自动放置算法让浏览器决定将项目放置到网格的位置。

什么是独自创立(bootstrap)？

Bootstrap是最流行的开源CSS框架，用于创建和构建现代网站和web应用程序。它使用HTML、JavaScript和CSS工具的集合，在mobilefirst理念的新标准中实现更快更简单的web开发。它是一个免费的前端框架，速度快，易于使用，而且它是圆滑的，直观的和强大的。它使用基于HTML和CSS的设计模板进行排版、按钮、表单、表格、导航等。Bootstrap最初被命名为Twitter Blueprint，由两位工程师Jacob Thornton和Mark Otto开发，他们以前在Twitter工作。Twitter在2011年发布了Bootstrap作为一个开源项目。Bootstrap提供了大量的内置组件，这些组件是专门用于特定目的的定制CSS类，如breadcrumbs、alerts、progress bar和navigation bar。最好的部分是，只要掌握HTML和CSS的知识，就可以轻松地从引导开始。

css网格与bootstrap的区别

布局

–CSS Grid是一个强大的二维布局模型，它提供了在两个方向上完美工作的布局控件，这意味着您可以沿两个轴水平和垂直工作。它可以让你一次把物品横放下来。另一方面，Bootstrap提供了一个12列的系统，这意味着该系统基于12列的网格。因此，每行中的列大小必须等于12。它在12之后中断，其余的列平均分布。这使得网格对于广泛的布局更加灵活。

灵活性

–CSS网格允许您在CSS中定义列和行，而无需在标记中定义它们。这个CSS标准的实现使您能够使用本机CSS代码构建页面布局，而不用担心更改HTML。Bootstrap有现成的内置组件，可以让你在任何时候建立一个花哨的网页，它可以很容易地定制它的外观和感觉你喜欢。但是，它使用了大量额外的CSS代码，这些代码在您的项目中没有任何相关用途。然而，Bootstrap的方便的网格系统使得构建响应性网页变得容易。

特征

–Bootstrap是一个很好的原型工具，它可以让你在很短的时间内用很少甚至没有自定义代码来**工作原型。大量网站的前端仍然依赖引导。Bootstrap与所有主要web浏览器和平台的最新稳定版本兼容。此外，它是一个最好的响应，移动第一网格系统提供了那里。使用cssgrid，您可以创建几乎无限排列的网格，并将子元素放置在您想要的任何位置，而不考虑它们的源顺序。cssgrid比Bootstrap更适合创建布局，而且它使HTML看起来更简洁。

css网格与bootstrap：比较图

总结 - css网格(of css grid) vs. 独自创立(bootstrap)

简而言之，如果你正在**一个简单的前端站点，而你不在乎前端到底是什么样子，那么Bootstrap对你来说是非常好的。它与所有最新的主流网络浏览器和平台兼容。大量网站的前端仍然依赖引导。Bootstrap仍然是前端生态系统中的有力竞争者，它的最大卖点是开源。cssgrid是一个强大的二维布局模型，它比Bootstrap更适合创建布局，它使HTML看起来更简洁。如果你想建立一个超级定制的布局，你会想定制很多，你最好坚持CSS网格。