Creating breakpoints using the Polymer app-grid layout

Question

The app-grid Element (helper class)in Polymer allows to create a responsive grid layout. The given Polymer Example creates a layout with three list items placed horizontally next to each other.

To make it responsively change the grid from 3 columns to 1 on smaller screens, breakpoints have to be declared. The documentation talks about defining custom properties inside a @media rule. (Link above)

I can't get the media rules to make the change. I found similar questions about the @media rule in Polymer but answers always pointed out to go with the iron-media-query. Now that the Polymer documentation mentions the @media I believe there must be a way to do it.

I tried using it like so but couldn't get it to work:

  <style include="app-grid-style">
   :host {
      --app-grid-columns: 3;
      --app-grid-item-height: 200px;
      --app-grid-gutter: 20px;
   }
   @media (max-width: 600px) {
      :host {
         --app-grid-columns: 1;
      }
   }
  </style>

Answer 1

Looking at the demos they always call this.updateStyles when the window is resized, to make sure all custom properties are applied correctly.

Unfortunately this information is missing from the docs...

  attached: function() {
    this._updateGridStyles = this._updateGridStyles || function() {
      this.updateStyles();
    }.bind(this);
    window.addEventListener('resize', this._updateGridStyles);
  },

  detached: function() {
    window.removeEventListener('resize', this._updateGridStyles);
  }

If you are using app-grid outside of an element in your main document you would have to call Polymer.updateStyles() instead.