如何使用 16 列响应式网格和 20px 间距

Question

我尝试了很多网格，从骨架到黄金和引导，但我无法找到更好的解决方案。最接近的是 Grid Pack。但我不想要任何列边距。您可以让我知道更好的方法吗？例如。我想使用 10 col 和 6col 浮动 div...对于 12 col，我尝试了 8col 和 4col 以及 7col 和 5col ..但我没有得到 psd 的确切宽度。

你可以看到我添加了 psd 的屏幕截图。

谢谢

PS。我没有附加任何代码，因为我很困惑。所以请不要投票。我只需要建议或小演示

Answer 1

网格相当简单。

您可能会有点困惑的原因是人们使用固定和流体网格，流体通常以百分比和固定像素设置。

要使用固定，只需从创建一个容器大小开始，您将在浏览器中居中，

.container { 
    width:960px;
    margin: 0 auto;
} 

将 960px 除以 10 = 每列 96px

在 CSS 中，使用公式 96 * 1、96 * 2，一直到 10 为每个网格大小创建一个类

grid_1 { width: 96px; }
grid_2 { width: 192px; }
grid_3 { width: 288px; }
grid_4 {...}

然后将类应用到 HTML 中的元素

<div class="logo grid_3"></div>
<div class="nav grid_7"></div>

大多数网格系统还使用应用了边距的“前缀”和“后缀”，当您不想要需要成为 grid_3 的容器但必须创建 grid_7 时，这会将元素向左或向右推送或拉动，因为间距。

网格非常擅长创造视觉平衡，还为我们作为开发人员/设计师提供了一种更轻松地布局内容的方法。

流体网格略有不同，我会先将你的头固定住。

[编辑]你应该使用设计中的内容。像我解释的那样使用（后缀和前缀）来推拉页面上的元素，因此使用（

suffix_1

）作为将右侧元素推开的方式，在设计中创建列间隙，同样适用于

prefix_1