css - 具有固定行和列的 polymer 网格

Question

对于使用 Polymer 的应用程序我需要一个 3x3 网格。它不必具有响应性，因为它应该始终显示在具有特定屏幕的设备上。目前我的网格是这样的:

<div flex style="height: calc(100%/3);" horizontal layout flex>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
</div>
<div flex style="height: calc(100%/3);" horizontal layout flex>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
</div>
<div flex style="height: calc(100%/3);" horizontal layout flex>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
  <div flex style="height: 100%;">content</div>
</div>

现在，我需要用对象中的内容填充它。我知道如何轻松地将包含 3 个元素的数组插入其中一行，但我不知道如何使用包含 9 个元素的数组填充所有 9 个内容区域。

<div flex style="height: calc(100%/3);" horizontal layout flex>
  <template repeat="{{category in mainCategories }}">
    <div flex style="height: 100%; background-color: {{category.color}};">{{category.text}}</div>
  </template>
</div>

这就是对象的样子(正好有 3 个元素，否则会把事情搞砸):

Polymer('my-app', {
  mainCategories: [
    {
      "text" : "Cat 1",
      "color" : "red"
    },{
      "text" : "Cat 2 ",
      "color" : "green"
    },{
      "text" : "Cat 3",
      "color" : "yellow"
    }
  ]
});

但我希望这个 mainCategories 对象正好有 9 个元素长，并且我想用这些值填充网格。当前的设置是否可以实现这一点，或者我不应该使用这样的网格系统？

Answer 1

非响应式网格布局不是 polymer 的设计目的，但是您可以在此处使用自定义 polymer 组件:

https://github.com/Polymer/core-layout-grid

这是一个核心组件，可以直接使用，也可以由您自己创建的自定义组件继承。 Demo.Html 显示了从 Core-Grid 生成的控件的示例。