sass - 3 列网格上的异端秩序/处置

Question

我想用 Susy 2 制作一个简单的 3 列/3 行网格，例如：

 1   2   3
 4   5   6
 7   8   9

但是这些块以错误和异端的顺序浮动。你可以看看：http: //img.spheerys.fr/images/2015/01/05/bug-susy.jpg

这是我的 HTML 标记：

<article class="block">1</article>
<article class="block">2</article>
<article class="block">3</article>
<article class="block">4</article>
<article class="block">5</article>
<article class="block">6</article>
<article class="block">7</article>
<article class="block">8</article>
<article class="block">9</article>

这是我的苏西地图：

$susy: (
  global-box-sizing: border-box,
  use-custom: (
    rem: true
  ),
  columns: 12,
  column-width: 4em,
  gutters: 1/4
);

最后，我的 Sass ：

.block
  +span(4 of 12)
  &:nth-child(3n)
    +last
    +break

怎么了？

Answer 1

:nth-child计算所有兄弟元素。所以:nth-child(3n)不仅适用于每个 3rd .block，它也适用于每个 3rd 兄弟姐妹 .block。使用时的最佳解决方案:nth-child是将所有列表项包装在它们自己的父项中，而不包含其他兄弟项。

Susy 还提供了创建这种画廊布局的快捷方式……

html:

<!-- wrap all your blocks in a div -->
<div>
  <article class="block">1</article>
  <article class="block">2</article>
  <article class="block">3</article>
  <article class="block">4</article>
  <!-- more blocks... -->
</div>

萨斯：

.block
  +gallery(4 of 12)

这应该就是你所需要的。