<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../bower_components/polymer/polymer.html”> <link rel=“import” href=“../bower_components/iron-flex-layout/iron-flex-layout.html”> <link rel=“import” href=“../bower_components/iron-media-query/iron-media-query.html”>

<!– This is a simple adaptive 2-columns grid. The first and every 4th item have width:100%, and the rest of the items have width equals to the column width (`columnWidth` in px). The grid will reflow to single column when 2 columns (plus a defined gutter margin) no longer fit on screen.

<two-columns-grid column-width="320" gutter="16">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</two-columns-grid>

–> <dom-module id=“two-columns-grid”>

<template>

  <style>

    :host {
      @apply(--layout-horizontal);
      @apply(--layout-wrap);
      max-width: calc(2 * var(--grid-column-width) + 4 * var(--grid-gutter));
      margin: var(--grid-gutter) auto;
      /* item has width/height ratio 4:3 */
      --grid-item-height: calc(3 * var(--grid-column-width) / 4);
    }

    :host > ::content > * {
      @apply(--layout-flex-none);
      width: var(--grid-column-width);
      height: var(--grid-item-height);
      margin: var(--grid-gutter);
      box-sizing: border-box;
    }

    :host > ::content > *:nth-of-type(3n - 2) {
      width: calc(100% - 2 * var(--grid-gutter));
      /* large item has widht/height ratio 2:1 */
      height: calc(var(--grid-column-width)  + 2 * var(--grid-gutter));
    }

    :host([narrow-layout]) {
      max-width: none;
      margin: 0 var(--grid-gutter);
    }

    :host([narrow-layout]) > ::content > * {
      width: 100% !important;
      height: var(--grid-item-height) !important;
      margin: var(--grid-gutter) 0;
    }

    iron-media-query {
      display: none;
    }

  </style>

  <content></content>

  <iron-media-query query="{{query}}" query-matches="{{narrowLayout}}"></iron-media-query>

</template>

<script>

  Polymer({

    is: 'two-columns-grid',

    properties: {

      /**
       * The width of the column in px.
       */
      columnWidth: {
        type: Number,
        value: 300
      },

      /**
       * The gutter width in px.
       */
      gutter: {
        type: Number,
        value: 8
      },

      /**
       * Indicates it is in narrow layout which means the grid is displayed as single column.
       */
      narrowLayout: {
        type: Boolean,
        notify: true,
        reflectToAttribute: true
      }

    },

    observers: [
      '_updateLayout(columnWidth, gutter)'
    ],

    attached: function() {
      // observers may run before attached, and updateStyles() will skip if it is not attached.
      // So we need to make sure updateStyles() is called after it's attached.
      this._updateCustomStyles();
    },

    _updateLayout: function(columnWidth, gutter) {
      this.query = '(max-width:' + (2 * columnWidth + 4 * gutter) + 'px)';
      this._updateCustomStyles();
    },

    _updateCustomStyles: function() {
      this.updateStyles({
        '--grid-column-width': this.columnWidth + 'px',
        '--grid-gutter': this.gutter + 'px'
      });
    }

  });

</script>

</dom-module>