无框网格定位/浮动样式

Posted 2023-03-06

【中文标题】无框网格定位/浮动样式

【英文标题】：Frameless Grid Positioning/Float Styles

【发布时间】：2012-11-12 03:31:42

【问题描述】：

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

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

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

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

（也只是一个仅供参考，我正在使用 SASS，以防万一）

谢谢！

【问题讨论】：

float: left 有什么问题？

GiantDuck：手动编码网格有点重新发明***。有很多很好的工具，不幸的是 Frameless 没有提供任何工具。

【参考方案1】：

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 非常多才多艺。它有不同的网格类型 (demo)。它也有不同的方法：您可以通过声明单个列宽并让 Susy 调整列数以匹配窗口宽度来转到content first。或者您可以声明哪些列数对应于哪些窗口宽度，并让 Susy 相应地调整列宽。

Susy 可让您实现 Frameless 的建议，但它还提供了所有必要的工具。在技​​术上有所不同，Susy 有着相同的想法：从手机的小网格开始，随着屏幕变大而变大。这个demo 说明了两个这样的步骤：它从 7 列开始，但如果屏幕宽度建议，它会变成 12 列。

在这里，我创建了一个使用 Susy 以五个步骤进行拉伸的网站：http://am-teh.ru 您可以在*** post 中看到该网站布局背后的代码（以及它的概念演变）。 Susy 的开发者对此给予了正面评价。

【讨论】：

非常感谢您的详尽解释，以及您对将 Susy 用于我的网格的想法。这是我第一次涉足响应式设计，这是一个相当长的学习曲线。我要去 Susy 看看情况如何。干杯