Search code examples
csspolymerpolymer-2.x

Display Grid does not work in Polymer correctly

I'm trying to make an responsive Grid which changes the order of elements when the container gets resized.

If the container gets bigger, then an element from the second row only gets in the row abouve if there is enough space. If there is not enough space the space between the elements gets bigger until the element from the second row can fit inside the first row.

Here is a working example how it's realized without Polymer

But the Problem is if I embed this inside a custom Polymer element. The space between two elements does not change. Is there any solution to this Problem?

Here is my Polymer-Element:

<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="test-element">
    <template>
        <style>
            .container {
                min-height: 400px;
                display: grid;
                grid-template-columns: repeat(auto-fill, 60px);
                justify-content: space-around;
                align-items: center;
                align-content: start;
            }

            .item {
                flex: 0 0 auto;
                margin: 5px;
                width: 50px;
                height: 50px;
                background-color: green;
            }
        </style>
        <div class="container">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </template>
    <script>
        class TestElement extends Polymer.Element {
            static get is() {
                return 'test-element';
            }

        }
        window.customElements.define(TestElement.is, TestElement);
    </script>
</dom-module>
Solution

  • Perhaps your issue is that you haven't set a display style on the host element:

    Custom elements are display: inline by default, so setting their width or height will have no effect. This often comes as a surprise to developers and may cause issues related to laying out the page. Unless you prefer an inline display, you should always set a default display value.

    Source: Custom Element Best Practices, Web Fundamentals

    I'm using Polymer 3 but it shouldn't really make any difference:

    import {Element as PolymerElement} from './node_modules/@polymer/polymer/polymer-element.js';

class TestElement extends PolymerElement {
  static get template() {
    return `
      <style>
        :host {
          display: block;
        }
        .container {
          min-height: 400px;
          display: grid;
          grid-template-columns: repeat(auto-fill, 60px);
          justify-content: space-around;
          align-items: center;
          align-content: start;
        }
        .item {
          flex: 0 0 auto;
          margin: 5px;
          width: 50px;
          height: 50px;
          background-color: green;
        }
      </style>
      <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
    `;
  }
}

customElements.define('test-element', TestElement);

    Then "run it":

    <html>
  <head>
    <script type="module" src="./test-element.js"></script>
  </head>
  <body>
    <test-element id="test"></test-element>
  </body>
</html>

    This is what I'm seeing:

    Screencast