grid-list.html

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://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 http://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">

<dom-module id="grid-list">

  <style>

    :host {
      display: block;
      @apply(--layout-horizontal);
      @apply(--layout-wrap);
      max-width: 1264px;
      margin: 0 auto;
      padding: 8px;
      font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    :host > ::content > * {
      @apply(--layout-flex-none);
      box-sizing: border-box;
      width: calc(33% - 20px);
      margin: 10px;
      margin: 8px;
      box-sizing: border-box;
    }

    @media (max-width: 1299px) {
      :host {
        max-width: 948px;
      }
    }

    @media (max-width: 1100px) {
      :host {
        max-width: 948px;
      }

      :host > ::content > * {
        width: calc(50% - 20px);
        margin: 10px;
      }
    }

    @media (max-width: 850px) {
      :host > ::content > * {
        width: 100%;
        margin-bottom: 10px;
      }
    }

    @media (max-width: 667px) {
      :host {
        max-width: 616px;
        padding: 4px;
      }

      :host > ::content > * {
        margin: 4px;
      }
    }

    @media (max-width: 643px) {
      :host {
        max-width: none;
        padding: 0;
        margin: 0;
      }

      :host > ::content > * {
        width: 100%;
        margin: 0;
      }
    }

  </style>

  <template>

    <content></content>

  </template>

  <script>

    Polymer({

      is: 'grid-list'

    });

  </script>

</dom-module>