我想创建一个具有相等装订线的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>