无框网格定位/浮动样式

Question

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

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

在这方面，我想我正在寻找一些关于是否有一些通用的定位样式，我可以用来保持这些元素堆叠。

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

（也只是一个供参考我利用SASS，万一有助于在所有）

谢谢！

Answer 1

UPD：无框网格已经拿出了实际的代码（SASS，LESS和JS），所以下面的答案已经过时。

无框是比网格框架更多的方法。

除了网格计算的单个函数（即使没有关于如何实际使用此函数的适当文档），它本身不会执行任何操作。

让我们一起来看看：

---

1.常规的固定宽度的网格。

挑选一个列宽，一个排水沟宽度......你知道，通常的东西。不要担心列的数量，但另外使用通常用于创建固定宽度网格的任何标准。我建议使用相对较小的列宽来增加灵活性。

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

---

2.让它重复无限。

现在，给您的网格无限数量的列，以便无论您的视口有多宽，越来越多的列进入视野。想象一下，你正在寻找一个无限宽的蜂巢，里面充满了柱子而不是六角形。

“无限数”它们似乎意味着“任何必要的数字”。无框主页适用于精彩的26列（您需要显示宽度为1920px才能查看），但frameless.scss仅为16列提供变量。

“给你的网格添加许多列”意味着“想出一个最大限度利用一定数量的列的设计”。

---

3.中心它在视口中。

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

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

---

4就是这样，真的。

开始使用网格。随着更多列可用，请使用媒体查询来调整您的设计。由于您将逐列修改而不是逐个像素，因此您可以精确选择布局何时应该适应而不应该适应的时间。例如，这个网站只适应大约320,480,600,900和1900像素。要看到它的实际操作，请尝试调整浏览器窗口的大小。

不，那不是“它”。这是工作实际开始的地方。

您必须手动编写网格以适应各种视口，而且Frameless不提供任何工具。

---

所以，如果你正在寻找可以用来组装网格工具，我建议Susy。这是一个伟大而优雅的SASS。

苏西是非常灵活的。它有不同的网格类型（demo）。它也有不同的方法：你可以去content first声明单列宽度，并让Susy调整列数以匹配窗口宽度。或者你可以声明什么样的列数与什么窗口宽度相对应，并让Susy相应地调整列宽。

Susy让你实现了无框架建议，但它也提供了所有必要的工具。 Susy在技术上有所不同，他们也有同样的想法：从手机的小网格开始，随着屏幕变大而变大。这demo说明了两个这样的步骤：它从7列开始，但如果屏幕宽度暗示转向12列。

在这里，我创建了一个网站，使用Susy分五步展开：http://am-teh.ru您可以在此StackOverflow post中看到此网站布局背后的代码（以及其概念的演变）。 Susy的开发人员对此给予了积极的评价。