显示网格在 Polymer 中无法正常工作

Question

我正在尝试制作响应式网格，它会在调整容器大小时改变元素的顺序。

如果容器变大，则第二行的元素只有在有足够多的情况下才会进入上一行 space。如果 space 不够，元素之间的 space 会变大，直到第二行的元素可以放入第一行。

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

但问题是如果我将其嵌入到自定义 Polymer 元素中。两个元素之间的 space 不变。这个问题有解决办法吗？

这是我的聚合物元素：

<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>

Answer 1

可能您的问题是您没有在宿主元素上设置显示样式：

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.

来源：Custom Element Best Practices, Web Fundamentals

我正在使用 Polymer 3，但应该没有什么区别：

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);

然后"run it":

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

这是我看到的：

显示网格在 Polymer 中无法正常工作

Display Grid does not work in Polymer correctly

css

polymer

polymer-2.x