Css 无框架栅格定位/浮动样式

我很难完全理解如何使用无框架网格。我是说，我完全理解这个概念。听起来不错

我想我的不满是它没有提供任何东西来定位你的元素。它只是设置它们的宽度，就这样。因此，即使您将列宽应用于元素，除非您开始完全浮动或定位，否则所有内容都会堆叠

在这方面，我想我正在寻找一些建议，看看是否有一些通用的定位方式可以用来防止这些元素堆积

还是这太宽了？我是否应该根据具体情况来定位我的元素

（仅供参考，我正在使用SASS，以防有任何帮助）

---

谢谢

UPD:Frameless Grid已经提供了实际的代码（SASS、LESS和JS），所以下面的答案已经过时了。

与网格框架相比，无框架更像是一种方法

它本身不做任何事情，除了一个用于网格计算的函数（即使没有关于如何实际使用该函数的适当文档）

我们来看看,

---

一,。制作固定宽度的规则网格

选择一个列宽，一个槽宽…你知道，通常的东西。现在还不必担心列的数量，但可以使用通常用于创建固定宽度网格的任何条件。我建议使用相对较小的列宽以增加灵活性

我们必须自己组装一个网格。使用任何东西来实现这一点，无框架不提供任何功能。列宽应为固定宽度

---

二,。让它无限重复

现在，为网格提供无限多的列，这样无论视口有多宽，都会有越来越多的列进入视图。想象一下，你看到的是一个无限宽的蜂巢，里面装满了圆柱而不是六边形

“无限数”的意思似乎是“任何必要的数”。无框架主页支持26列（您需要显示宽度为1920px才能查看），但Frameless.scss仅为16列提供变量

“给你的网格提供一定数量的列”意味着“提出一种最大限度利用一定数量列的设计”

---

三,。在视口中将其居中

将栅格水平对齐到视口的中间。对于具有偶数个列的网格（如图所示），将视图的中心点对齐在两个最中心的列之间的沟槽的中间。对于奇数网格，将其对齐在最中心的列的中间。

这是非常基本的，但它需要我们手动执行另一行CSS代码

---

四,。就这样，真的

开始使用网格。当更多列可用时，使用媒体查询调整您的设计。由于您将逐列而不是逐像素进行调整，因此您可以准确选择布局应调整和不应调整的时间。例如，这个站点只适应大约320、480、600、900和1900像素。要查看它的运行情况，请尝试调整浏览器窗口的大小

不，那不是“它”。这就是工作真正开始的地方

您必须手动编写网格代码以适应各种视口，无框架不提供任何工具

---

因此，如果您正在寻找可以用来组装网格的工具，我建议您。这是一个伟大而优雅的讽刺

苏西多才多艺。它有不同的网格类型（）。它还有不同的方法：您可以通过声明单列宽度并让Susy调整列数以匹配窗口宽度。或者，您可以声明哪些列数对应于哪些窗口宽度，并让Susy相应地调整列宽

Susy让您实现无框架的建议，但它也提供了所有必要的工具。由于技术上的不同，苏西有着相同的想法：从一个小的移动电话网格开始，随着屏幕变大，网格会变大。这说明了两个这样的步骤：它从7列开始，但如果屏幕宽度建议，它会变成12列

---

在这里，我创建了一个网站，使用Susy分五步进行扩展：在这里，您可以看到该网站布局背后的代码（以及其概念的演变）。Susy的开发人员对此做出了积极的评价。

float:left有什么问题？？GiantDuck:手动编写网格代码有点像是在改造轮子。这方面有很多很好的工具，不幸的是，无框架没有提供任何工具。非常感谢您的透彻解释，以及您对在我的网格中使用Susy的想法。这是我第一次尝试响应式设计，这是一段相当长的学习曲线。我要试试苏西，看看情况如何。干杯