page-layout - 你如何将基于百分比的边距放入 CSS 网格？

Question

我正在尝试学习如何构建网格系统 - 到目前为止 this is what I've got .我想知道的是，如何在列之间创建实际间隙？如果我放入边距，所有内容都会超出网格范围，因为“框大小调整”只考虑边框和填充。我能想到的唯一方法是给每一列一个粗边框。

有没有办法让边距起作用，让列之间有一个实际的空间？

Answer 1

通过巧妙但基本地使用伪类，您可以轻松获得出色的解决方案。

假设您的列正在使用 .column 类并且您想要 5 列。这将是每个 20%，减去 2% 的差距(例如)。

首先，使用 box-sizing: border-box;，您可以像您提到的那样在宽度中包含填充和边框，这是一个很好的做法。

.col {
box-sizing: border-box;
width: 18%;
margin-right: 2%;
}

之后，对于最后一个 .col 我们可以使用伪类 :last-child 并覆盖右边距，如下所示:

.col:last-child {
margin-right: 0;
}

这个例子中的数字实际上并不正确，但它说明了一种在使用可扩展和可维护的 CSS 代码的同时实现你想要的东西的好方法。

编辑:在检查了您的笔后，我强烈建议不要使用边框来“分隔”列。这是一种视觉hack，仅此而已，它实际上取决于您网站的背景颜色。我建议详细概述“大人物”是如何做的，例如 Bootstrap 或 Foundation。