具有固定行和列的聚合物网格

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

无响应的网格布局是不是有什么聚合物设计，但有为，你可以在这里使用一个定制的聚合物组分：

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

这是可以使用的核心部件直接或由您自己创建的自定义组件继承。 Demo.Html显示了Core-Grid控件的示例。