Polymer - Creating an equally spaced, dynamic horizontal layout

Question

I am using the

core-scaffold

component to make a list of objects a shown below. My goal is to put 2 items on each row which share the space 50% -50% . However Horizontal layout fails to allocate space with this ratio. How can I achieve equal spacing.

Secondly, when the screen size gets small, I want the horizontal layout to change into a vertical layout so that, as again shown in the picture, items are not compressed. What is a good way to achieve dynamic layout ?

enter image description here

Answer 1

Use the core-media-query element to capture responsive changes:

<core-media-query query="max-width: 600px" queryMatches="{{phoneScreen}}">
</core-media-query>

Use the flex attribute on your columns to get the 50-50 width. Also use the {{phoneScreen}} (set by the core-media-query) to determine if we should use the horizontal layout or not

<div class="row" horizontal?="{{!phoneScreen}}" layout>
   <div class="panel" flex>50%</div>
   <div class="panel" flex>50%</div>
</div>

Example: http://plnkr.co/edit/WxUFCWFQVMeBgXSLI32M?p=preview

Polymer - Creating an equally spaced, dynamic horizontal layout

Sign up