Susy stack content per column

Question

I have a webpage based on a susy grid, with content like this:

<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>

Each div spans 4 columns of a 12-column grid. The first three divs appear in a single row, the last div moves to the next row - see http://codepen.io/anon/pen/meGJVp .

Now I need the last div to move up, directly below the first one. How can I do so?

Possible duplicate: http://stackoverflow.com/questions/20307386/masonry-layout-in-css3 — cimmanon, Nov 04 '15 at 16:32
The general problem there is similar, but my problem is specific to Susy. — gummbahla, Nov 05 '15 at 08:26
Susy doesn't have magic powers, it has to compile to CSS in the end. You can't get what you want without modifying the markup. — cimmanon, Nov 05 '15 at 12:04

Alex · Accepted Answer · 2015-11-04T16:07:41.350

1

If you want the item to stack underneath the first item in the grid then the only way is to nest it in the same column:

<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>

See here: http://codepen.io/anon/pen/QjVjMK

edited Nov 04 '15 at 16:07

answered Nov 04 '15 at 15:57

Alex

2,651
2
25
45

Susy stack content per column

1 Answers1