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

Question

我正在尝试学习如何构建网格系统 - 到目前为止，这就是我所拥有的。我想知道的是，我将如何在列之间创建实际的间隙？如果我输入边距，一切都会超出网格，因为“box-sizing”只考虑边框和填充。我能想到的唯一方法是给每一列加粗边框。

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

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 代码时实现所需目标的好方法。

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