我很难完全理解如何使用Frameless Grid。我的意思是，我完全理解这个概念。听起来不错。
我想我的牛肉只是它没有提供任何方式来定位你的元素。它只是设置它们的宽度，就是这样。因此，即使您将列宽应用于元素，除非您开始浮动或绝对定位，否则所有内容都会堆叠。
在这方面，我想我正在寻找一些关于是否有一些通用定位样式可以用来保持这些元素不被叠加的建议。
或者这太宽泛了？我应该根据具体情况定位我的元素吗？
（也是我正在使用SASS的一个FYI，如果有帮助的话）
谢谢！
答案 0 :(得分：7)
UPD：Frameless Grid提供了实际代码（SASS，LESS和JS），所以下面的答案已经过时了。
无框架比网格框架更像是一种方法。
除了用于网格计算的单个函数之外，它本身不会做任何事情（即使没有关于如何实际使用此函数的正确文档）。
我们来看看：
1。制作一个固定宽度的网格。
选择一个列宽，一个水沟宽度......你知道，通常的东西。不要担心列的数量，但是否则使用通常用于创建固定宽度网格的任何条件。我建议使用相对较小的列宽以增加灵活性。
我们必须自己组装一个网格。使用任何东西来实现，Frameless不提供任何东西。列宽应为固定宽度。
2。让它无限重复。
现在，为您的网格提供无限数量的列，这样无论您的视口有多宽，都会有越来越多的列进入视图。想象一下，你正在看一个无限宽的蜂窝状，里面装满了柱子而不是六边形。
“无限数量”它们似乎意味着“任何必要数量”。无框主页使用迷人的26列（您需要显示宽度为1920px才能查看），但frameless.scss仅提供16列的变量。
通过“为您的网格提供多个列”意味着“提出一种最大限度利用一定数量的列的设计”。
3。将其置于视口中。
将网格水平对齐到视口的中间。对于具有偶数列的网格（如图所示），将视口的中心点对齐在两个最中心列之间的装订线中间。对于奇数编号的网格，请将其对齐在最中心列的中间。
这是非常基本的，但它需要我们手动执行另一行CSS代码。
4。就是这样，真的。
开始使用网格。使用媒体查询可以在更多列可用时调整您的设计。由于您将逐列而不是逐像素地进行调整，因此您可以准确选择布局应该和不应该适应的时间。例如，该网站仅适应320,480,600,900和1900像素。要查看它的实际效果，请尝试调整浏览器窗口的大小。
不，那不是“它”。这就是工作实际开始的地方。
您必须手动编码网格以适应各种视口，而Frameless不提供任何工具。
因此，如果您正在寻找可用于组装网格的工具，我建议Susy。这是SASS的一个伟大而优雅的作品。
Susy非常多才多艺。它有不同的网格类型（demo）。它也有不同的方法：您可以通过声明单列宽度并让Susy调整列数以匹配窗口宽度来content first。或者，您可以声明哪些列数对应于窗口宽度，并让Susy相应地调整列宽。
Susy让您实现Frameless的建议，但它也提供了所有必要的工具。在技术上有所不同，Susy有着同样的想法：从手机的小网格开始，随着屏幕变大，使其变大。这个demo说明了两个这样的步骤：它从7列开始，但如果屏幕宽度显示，则变为12列。
在这里，我创建了一个网站，使用Susy分五个步骤：http://am-teh.ru您可以在StackOverflow post中看到此网站布局背后的代码（以及它的概念演变）。 Susy的开发人员积极评价它。