Polymer 1.0 - Responsive columns

Question

Here is what I want to achieve with Polymer Elements:

Polymer Structure

The column size is not always the same width but relative to the screen or warpper-div size. In example 1, it's each 16.66%, in example 2 it is 33.33%, in example 3 it should be 100%.

I need a responsive layout where -dependent upon the screen size- a different number of columns is displayed per row and each of their column sizes will be adjusted.

Does anyone know how I can achieve this with https://elements.polymer-project.org/elements/iron-flex-layout? I am a little puzzled on how to work with flex and layout horizontal/layout vertical.

I would be very thankful for a codepen (or similar) example on how code and result could look like.

Update: I found the solution here: How to control number of items per row using media queries in Flexbox?

Answer 1

You can use iron-media-query to set a property on an element, apply clsses to HTML elements depending on this property value and then apply different CSS depending on the set classes.