网格是设计师必不可少的工具。一个精心设计的网格系统可以给你的设计带来所有的不同，给你一个坚实的结构来展示你的创造力。

从历史上看，在网络上，设计和构建网格并不总是那么容易。从过去使用表格进行布局的糟糕时期到CSS中最近(但仍然繁琐)的浮点和清除方法，web设计者和无锡设计网页开发人员不得不在没有更好的解决方案为Web创建网格的情况下找到创新的解决方案。

我很高兴地说，所有这些都在迅速变化，现在有大量的方法可供选择来构建你的网格。但你怎么知道该选哪一个呢？在本文中，我将深入研究一些现有的选项，并让您体验一下我们将来如何创建布局。

流体网格是响应式网页设计的核心原则之一，所以这里我将重点介绍使我们能够创建流体和百分比基布局的工具和方法。CSS网格系统.

CSS框架

使用CSS框架是创建响应性布局的最快捷和最简单的方法之一。在提供的许多框架中，自举和基础可能是最受欢迎的。这些框架的网格系统的工作方式大致相同：只需将框架的预定义类添加到HTML中即可。使用Bootstrap的标记示例：

由于Bootstrap使用的是12列网格，本例将为您提供三项：6列宽(或行的50%)、4列宽(或行宽的三分之一)、中型(或平板)断点。

优点：

• 快速，易于建立和使用，如此伟大的原型。
• 引导4(目前在alpha中)和Foundation 6都支持(可选)柔性盒网格，为用户提供了更强大的布局功能。
• 它们都使用Sass，这是最流行的预处理器--并给您在代码中使用Sass或普通CSS的选项。
• 优秀的文档和社区支持--它们被广泛使用，您可以在网上找到关于这些著名框架的大量文章和教程。引导和基础，流行和良好的维护，这意味着他们是可靠的，任何新版本中的错误都可能很快修复。

缺点：

• 性能在日益增长的移动网络上很重要，Bootstrap因臃肿而受到批评，这也是您可能不愿在生产中使用它的一个重要原因。当你真正需要的只是一个网格时，为什么还要增加这些浮肿呢？然而，有一些方法可以去掉所有未使用的CSS：

  联合国支助团

  就是这样一种方法。或者，骨架是另一个框架，它有一个类似的网格系统(尽管功能不那么强大)，但是没有Bootstrap的额外组件的膨胀。
• 就我个人而言，我发现这些框架对我来说可能有点僵化。引导和基础使用常见的预定义断点，但在实践中，这些断点可能不一定适合您的项目。同样，在实践中，您可能并不总是想要12列网格。如果你想要一个更灵活的布局，那么，至少与Bootstrap，你是运气不好。
• 很多人说，所有的Bootstrap站点看起来都像，Bootstrap站点，这是有道理的。如果您想要在框架已经样式化的组件之上构建，那就太棒了，但不幸的是，它可以更多地消除您不想要的样式。
• 如果您的布局相当复杂，您可以在任何特定组件上编写大量的类，这对代码的可读性并不总是很好。
• 在Bootstrap 4中，LASTER不再支持作为预处理器，所以如果您习惯于使用它，您可能会犹豫进行切换。

最终，如果你想要的只是一个网格系统，那么Bootstrap和Foundation可能有点过火了。让我们看看其他一些选择。

SASS网格系统

沙斯是最流行的CSS预处理器，在过去的几年里出现了大量的网格系统，这些系统利用了Sass的混合和功能。我个人最喜欢的是苏西具有优秀的文档和社区支持。波本是另一个流行的Sass网格系统。两者都有一些其他功能不具备的特性，因此值得一看，看看哪些功能适合您。

与传统框架不同的是，这些网格系统仅在Sass文件中使用，它们不涉及HTML。这意味着您不需要在HTML中使用指定的网格类--只需在Sass中包含Mixin。使用Susy创建一个跨12列中的8列的文章部分，其中边栏跨4列：

优点：

• 表演性-只有你实际使用的CSS是编译的，你没有发送一吨多余的CSS。
• 只是网格系统--与其他框架不同，没有预先样式化的组件，因此没有必要覆盖现有的样式。
• 只使用你需要的东西--苏西和利齐都有一些很好的附加功能，但是如果你只想保持简单的话，你就不用使用它们了。
• 超级灵活-您可以为不同的断点设置列数(例如，12列的桌面大小，4列的移动大小)，并定义这些断点，但无论你喜欢。
• 编译后的CSS只是浮动和页边距，所以浏览器支持不是问题。
• 良好的文档，与一个日益增长的社区。

缺点：

• 你不太可能找到一个Sass网格系统来满足

  每个

  可能的网格场景，所以您可能仍然需要做一些定制。
• 在撰写本报告时，苏西和波旁并不支持柔性盒的布局。Flexbox仍然需要旧浏览器的退步，所以一个网格系统构建它可能是一个理想的一刀切的解决方案。幸运的是，Susy是可以扩展的，而且您可以根据您的需要定制它！我写了一篇文章

  带Susy的柔性箱

  一段时间前，有几个人开始讨论如何在Flexbox中使用Susy。有传言说，下一个版本的苏西将包括，如果不是柔性箱支持的话，至少一些工具，以使这更容易。
• 如果您使用了大量的混合器，那么使用RubySass，您的Sass编译时间可能会变得非常慢。因此，我建议使用Libsass，它要快得多。
• 另一个不让Sass使用混合器的原因是可读性和可维护性。对于所有从事一个项目的开发人员来说，是否清楚那些混合器在做什么？有些人可能会争辩说，过于依赖Mixin会产生来自已编译CSS的过度抽象，这可能会导致您无意中编写更大的CSS文件(因此性能更低)。当然，这对于Sass来说是一个问题，不仅仅是网格系统，而且在考虑网格方法时肯定值得记住。

带有Flexbox的自定义网格

FlexibleBox布局模块(FlexibleBox，Flexbox)一直是渴望摆脱浮点的Web开发人员的热切期望，现在终于得到了现代浏览器的支持。Flexbox解决了许多问题常见布局问题我们网络社区长期以来一直在哀叹，比如竖直的居中和等高的柱子。这是一种非常有效的创建定制网格的方法。

下面是如何通过容器中的文章和侧栏布局来创建简单布局：

上面的示例使用了FlexGrowth属性，给出了4列中的第3篇文章和1列的侧边栏。然而，您的网格系统可能会比这更复杂一些！在……里面这篇文章，HeydonPickering概述了使用柔性盒创建响应网格的可能方法。

优点：

• 一个强大的工具-一旦你尝试它，你将永远不想回到浮标！

  
  

  与我们前面提到的许多工具一起工作，但不依赖于它们中的任何一个。您不需要使用Sass或任何其他预处理器。
• 通过使用Flexbox(它毕竟是本机CSS)，您不会向项目添加额外的依赖项，从而有助于保持代码库的轻量级和性能。
• 它完全是CSS--就像上面概述的Sass网格系统一样，它独立于HTML。

缺点：

• 与我提到的网格系统和框架不同，Flexbox只是为您的布局提供工具，而不是为您计算。如果您想要将其构建到灵活的网格系统中，您必须找到其他方法来计算您的列和排水沟的宽度。
• Flexbox现在在所有现代浏览器中都得到了支持(尽管在IE11中有缺陷)，但是如果您想支持较旧的浏览器，您将需要一个后盾，这很有可能。
• 最初，很难记住所有不同的属性以及它们所做的事情。你想要证明-内容，对齐-项目还是对齐-内容？弯曲的方向，弯曲的包裹还是弯曲的基础？我用

  乔尼·特雷索尔(Joni Trythall)的柔性盒小版

  作为一个方便的快速参考指南。
• 因为Flexbox是如此强大，许多无锡设计师和开发人员都将其作为布局工具直接投入其中。然而，一些人认为，柔性盒更适合于小型组件，我们不应该将它用于页面范围的网格系统。然而在现实中，作为一种工具，它是目前我们通过在网络上布局来实现我们想要达到的许多目标的最好工具，而且人们会采用它，不管它是否有意这样做--就像他们采用浮标一样，它们同样不是为了布局而设计的。