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

Question

我正在尝试学习如何构建网格系统 - 到目前为止 this is what I've got。我想知道的是，我将如何在列之间创建实际的间隙？如果我输入边距，一切都会超出网格，因为“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 代码的同时实现所需目标的好方法。

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