我很难完全理解如何使用 Frameless Grid。我的意思是，我完全理解这个概念。听起来不错。
我想我的不满只是因为它没有提供任何元素定位方式。它只是设置它们的宽度，仅此而已。因此，即使您将列宽应用于您的元素，除非您开始 float 或绝对定位，否则所有内容都会堆叠。
在这方面，我想我正在寻找一些关于是否有一些通用定位样式可以用来防止这些元素堆叠的建议。
还是这太宽泛了？我应该根据具体情况定位我的元素吗？
(也只是我正在使用 SASS 的仅供引用，以防有帮助)
谢谢!
最佳答案
UPD:Frameless Grid 已提供实际代码(SASS、LESS 和 JS)，因此以下答案已过时。
与网格框架相比，无框架更像是一种方法。
除了用于网格计算的单个函数(即使没有关于如何实际使用此函数的适当文档)之外，它本身不做任何事情。
让我们看看:
1. Make a regular fixed-width grid.
Pick a column width, a gutter width… you know, the usual stuff. Don’t worry about the amount of columns just yet, but otherwise use whatever criteria it is that you usually use to create fixed-width grids. I recommend using a relatively small column width for added flexibility.
我们必须自己组装一个网格。使用任何东西来实现这一点，Frameless 不提供任何东西。列宽应为固定宽度。
2. Make it repeat infinitely.
Now, give your grid an infinite number of columns, so that no matter how wide you make your viewport, more and more columns come into view. Imagine you’re looking at an infinitely wide honeycomb filled with columns instead of hexagons.
“无限数量”似乎意味着“任何必要的数量”。 Frameless 主页使用迷人的 26 列(您需要 1920px 的显示宽度才能查看)，但 frameless.scss 仅为 16 列提供变量。
“给你的网格一些列”的意思是“想出一个最大限度利用一定数量列的设计”。
3. Center it in the viewport.
Align your grid horizontally to the middle of your viewport. For a grid with an even number of columns (pictured), align the center point of your viewport in the middle of the gutter between your two centermost columns. For an odd-numbered grid, align it in the middle of your centermost column.
这是非常基础的，但它需要我们手动编写另一行 CSS 代码。
4. That’s it, really.
Start using the grid. Use media queries to adapt your design as more columns become available. Since you’ll be adapting column by column instead of pixel by pixel, you can choose exactly when your layout should and shouldn’t adapt. This site, for example, only adapts around 320, 480, 600, 900 and 1900 pixels. To see it in action, try resizing your browser window.
不，那不是“它”。这才是工作真正开始的地方。
您必须手动编写网格代码以适应各种视口(viewport)，而 Frameless 不为此提供任何工具。
因此，如果您正在寻找可用于组装网格的工具，我推荐 Susy .这是 SASS 的一个伟大而优雅的作品。
Susy 用途广泛。它有不同的网格类型 ( demo )。它也有不同的方法:你可以去content first通过声明单列宽度并让 Susy 调整列数以匹配窗口宽度。或者您可以声明什么列数对应什么窗口宽度，然后让 Susy 相应地调整列宽。
Susy 可让您实现 Frameless 建议的功能，但它也提供了所有必要的工具。在技术上有所不同，Susy 的想法是一样的:从手机的小网格开始，随着屏幕变大而变大。这demo说明了两个这样的步骤:它从 7 列开始，但如果屏幕宽度建议则变成 12 列。
我在这里创建了一个使用 Susy 分五步拉伸(stretch)的网站:http://am-teh.ru您可以在此 StackOverflow post 中查看此站点布局(及其概念的演变)背后的代码. Susy 的开发者对此给予了正面评价。
关于css - 无框网格定位/ float 样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13534646/