如何将基于百分比的边距放入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代码时实现目标的好方法。

编辑：在审核完笔后，我强烈建议您不要使用边框来分隔＆＃34;分开＆＃34;列。它是一个视觉 hack 而且不再是，实际上取决于您网站的背景颜色。我建议详细了解＆＃34;大镜头＆＃34;正在这样做，例如 Bootstrap 或基金会。