Masonry in Polymer 1.0 - html

Question

So I have a custom element called my-element and within that element I have a repeating template that displays a bunch of custom elements called my-card. So I was using inline-block to divide the cards in two columns and that worked but since the cards were of different heights there was some ugly white space in between. As per a suggestion from user here on stackoverflow I used column-count to make it work. Visually, it worked but the my-cards on the right column are not interactive.
If I hover under the first column, I can click the my-cards that are supposed to be in the second column.
Despite it not showing in the image above, the my-cards will be of different heights so I need to have a masonry layout. One column in mobile screen width and two columns in tablet+. How can I achieve that?
Here's the code: http://pastebin.com/NFv6ed2T

Answer 1

I don't see any repeats or anything, but why not change your code to use horizonal and vertical layouts? Remove all excess styling except for that.
And the <section> tag probably isn't necessary.
Assuming you include the iron-flex-layout code somewhere...
working code w/simple styling: http://jsbin.com/cetece/1/edit?html,output
<template id="app" is="dom-bind">
<paper-material class="card">
<div class="vertical layout">
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
<paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
</div>
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="racism">Racism</paper-button>
<paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
</div>
<div class="horizontal layout row">
<paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
<div class="button" > </div>
</div>
</div>
</paper-material>
</template>
This is an example if you need to have the buttons wrap into one row if the container is too small for 2 rows: http://jsbin.com/cetece/2/edit?html,output
Add wrap class to the rows and adjust the styles for a fixed button size and non-fixed wrapping container.
<template id="app" is="dom-bind">
<paper-material class="card">
<div class="vertical layout">
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
<paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
</div>
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="racism">Racism</paper-button>
<paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
</div>
<div class="horizontal layout row wrap">
<paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
<div class="button" > </div>
</div>
</div>
</paper-material>
</template>
If you need the buttons to go be able to all align horizontally if needed then simply remove all of the row containers, and the vertical layout container, and place all paper-buttons in one single container, such as the paper-material.