如何减少基础网格中项目之间的空间？答案

【问题标题】：How do I decrease space between items in a grid in foundation?如何减少基础网格中项目之间的空间？
【发布时间】：2013-08-23 18:36:03
【问题描述】：

我正在基础中构建一个简单的站点，我认为它会更快，因为它有很棒的网格。问题是当我将图像放在网格上时，它们之间的间距太远了。我想减少间距，所以图像基本上是 15px 左右。我试图改变填充和边距，但它会抛出整个网格。有没有一种简单的方法可以在 Foundation 中实现这一点，还是我最好从头开始写这个？我的 HTML 在下面。

<div class="row">
<div class="gallery small-4 large-4 columns">
  <img src="assets/img/chaiLatte.jpg" alt="Painting by LaRue. ">
</div>
<div class="gallery small-4 large-4 columns">
  <img src="assets/img/milkchocolate.jpg" alt="Painting by Bellingham.">
</div>
  <div class="gallery small-4 large-4 columns">
      <img src="assets/img/darkChocolate.png" alt="Painting by Bellingham.">
  </div>

【问题讨论】：

标签： grid margin padding zurb-foundation

【解决方案1】：

您可以通过将该类添加到包含图像的行来折叠网格以删除间距。然后，您可以将填充或边距添加到图像中，以提供所需的 15 像素间距。

<div class="row collapse">
  <div class="gallery small-4 large-4 columns"></div>
  <div class="gallery small-4 large-4 columns"></div>
  <div class="gallery small-4 large-4 columns"></div>
</div>

【讨论】：

【解决方案2】：

_settings.scss 中有一个$column-gutter 变量。这控制了网格间距。默认设置为 $column-gutter: emCalc(30px);。尝试更改此值。这只会在您使用 sass 版本时对您有所帮助。

【讨论】：