网格布局 - 我为什么要使用它，我应该使用像Bootstrap或Foundation这样的框架吗？

Question

我有使用Twitter Bootstrap和Foundation的经验，我个人认为我唯一想要使用的是他们的网格系统。其他功能只是臃肿。

所以我读到了网格布局的前景。我发现的所有文章都面向“艺术”解释（黄金比例等）。我是一名内心的编码员，我需要一个明确的＆amp;使用网格布局的逻辑原因（例如：'列可以在移动屏幕上轻松堆叠在一起，并在较大屏幕上水平扩展'）。有人能否告诉我将网格系统应用到我的网站的优缺点？你个人认为使用网格系统是好的吗？

如果答案是肯定的，我应该使用Twitter Bootstrap / Foundation之类的预制网格系统，还是只为我自己制作一个？我不需要所有其他功能与我的问题无关。

谢谢！ ：d

Answer 1

我同意@kunalbhat，这可能不是最好的问题，但是既然你做了，我会试着回答它。

网格设计允许速度和适应性。多种感官速度。速度的第一部分是编写代码的速度。在使用网格系统时，您可以轻松获得所需的布局，并且所有内容都能正确对齐。您不必记住您的表格和列以及col-spans等。

第二个速度是修改你的代码。你不可避免地需要回头做出改变，用网格很容易做到。将col-md-7更改为col-md-6可以轻松地对页面布局进行一些调整，以便轻松跟踪和执行。

你提到了响应式设计，Bootstrap和Foundation都有响应式网格。网格将根据视口大小捕捉到不同的大小。但是你也有控制权。例如，如果您希望在桌面上占据屏幕的1/12，在平板电脑上占1/4，在使用Bootstrap和Foundation轻松完成的手机上占100％，则两者都具有针对特定视口的网格类。

还提供基于这些视口的可见性类。

对于容易解决的“臃肿”部分。使用SCSS，您可以轻松导入库的部分内容。例如，对于我所在的一个项目，我只导入了网格，而且它要小得多。

Answer 2

我碰巧认为这是一个SO问题，仅仅是因为CSS网格系统的一个主要缺点：语义。

我认为语义对于Web开发人员来说很重要，并且拥有一个名为col-md-7的类并不是最具语义性的事情。

但我喜欢网格，因为它们易于使用，所以我开始使用LESS。因为它允许我在CSS中使用变量和函数（mixins），所以我可以在我的CSS上构建自己的网格系统，而不是在我的HTLM上。

您可以从Frameless开始，自定义您自己的课程＆＃39;。