显示它们之间有空格的列

Question

我如何显示它们之间有空格的列？默认情况下，它们都是相互跟随的，我找不到改变它的方法。

以下是来自youtube的示例：

Answer 1

取决于你想要多少间距...当你使用前端框架有时你需要做一些权衡，开发速度与“不太定制”。从youtube中获取的样本的间距小于框架的默认列gutter，所以你肯定“默认情况下它们都是相互跟随的”，我认为不是很精确;它们有间距，如果你想删除，只需使用row collapse作为列容器的类。

现在，如果您想要比默认值更多的间距，您仍然可以选择：

• 您可以在每个元素之间留一列，只需为每个元素添加一列偏移。
• 您可以在框架设置上更改列装订线大小（如果您使用的是CLI版本或自定义，而不是预构建）
• 您还可以编写一些CSS来增加特定列容器的间距（我不建议全局这样做，因为您可能会破坏框架）。

Answer 2

您的解决方案是使用Bootstrap或Foundation等框架。在基础中，每个“列”都在填充内，因此您可以显示这样的网格。

在这里阅读更多信息：http://foundation.zurb.com/sites/docs/grid.html

Answer 3

这篇文章是用Zurb Foundation标记的，所以我将使用他们的类来解决它，只需要一点点解决方法。例如，如果您希望三列能够继续添加项目并使其自动换行，则可以使用块网格具有以下简单示例：

<div class="grid-x small-up-3">
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
</div>

和以下CSS

.small-up-3 > .cell {
  width: calc(33.33333% - 4px);
  margin-left: 2px;
  margin-right: 2px;
}
.small-up-3 > .cell:nth-of-type(n+4) {
  margin-top: 2px;
}

需要calc从每个单元格的宽度中减去边距，以防止在添加正常边距时看到的包裹。