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

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控件的示例。