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