如何使用Foundation XY-Grid获得相等的边距装订线

时间:2019-06-20 19:47:39

标签: css flexbox zurb-foundation

我想创建一个具有相等装订线的XY网格,即使单元格彼此紧挨在不同的网格中。

当使用“ .grid-container.fluid”时,我还希望每边的边距与单元格之间的边距相同。

请查看代码,我也设置了一支笔。

如您所见,它在grid-1,grid-2,grid-3中产生相等的装订线,但它们之间的装订线只有装订线尺寸的一半。

我想尽可能少地改变,以免在前进中遇到无法预见的问题。 Zurb也许有一个很好的理由来说明为什么要这样做。

https://codepen.io/pettere/pen/ewgMWx

<div class="grid-container fluid">
    <div class="grid-x grid-margin-x grid-margin-y grid-1">
      <div class="cell small-6">Grid 1</div>
      <div class="cell small-6">Grid 1</div>
      <div class="cell small-6">Grid 1</div>
      <div class="cell small-6">Grid 1</div>
    </div>
    <div class="grid-x grid-margin-x grid-margin-y grid-2">
      <div class="small-6 cell">Grid 2</div>
      <div class="small-6 cell">Grid 2</div>
    </div> 
    <div class="grid-x grid-margin-x grid-margin-y grid-3">
      <div class="small-6 cell">Grid 3</div>
      <div class="small-6 cell">Grid 3</div>
      <div class="small-6 cell">Grid 3</div>
      <div class="small-6 cell">Grid 3</div>
    </div>
    </div>

0 个答案:

没有答案