每列 Susy 堆栈内容答案

【问题标题】：Susy stack content per column每列 Susy 堆栈内容
【发布时间】：2015-11-04 15:09:59
【问题描述】：

我有一个基于 susy 网格的网页，内容如下：

<div class="container">
  <div class="column-gallery-item">
    <p>Who's down there? Can't see!</p>
  </div>
  <div class="column-gallery-item">    
    <p>Lots<br>and lots<br>and lots<br>of content</p>    
  </div>
  <div class="column-gallery-item">
    <p>Not much here</p>
  </div>

  <div class="column-gallery-item">    
    <p>I want to move up!</p>    
  </div>
</div>

每个div 跨越 12 列网格的 4 列。前三个divs 出现在一行中，最后一个div 移动到下一行 - 请参阅http://codepen.io/anon/pen/meGJVp。

现在我需要最后一个 div 向上移动，直接在第一个下方。我该怎么做？

【问题讨论】：

可能重复：stackoverflow.com/questions/20307386/masonry-layout-in-css3
那里的一般问题类似，但我的问题是 Susy 特有的。
Susy 没有魔力，最终还是要编译成 CSS。不修改标记就无法得到你想要的。

标签： css sass susy

【解决方案1】：

如果您希望项目堆叠在网格中第一个项目的下方，那么唯一的方法是将其嵌套在同一列中：

<div class="column-gallery-item-stacked">  
<div class="nested-column-gallery-item">
    <p>Who's down there? Can't see!</p>
</div>
<div class="nested-column-gallery-item">    
    <p>I want to move up!</p>    
</div>
</div>

请看这里：http://codepen.io/anon/pen/QjVjMK

【讨论】：