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

Question

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

如果容器变大，那么只有在有足够空间的情况下，第二行的元素才会出现在上一行。如果没有足够的空间，元素之间的空间会变大，直到第二行的元素可以放入第一行。

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

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

这是我的 polymer 元素:

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

然后“运行它”:

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

这是我看到的: