Полимерная сетка с фиксированными рядами и колонками

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> 

Теперь мне нужно заполнить это контентом из объекта. Я знаю, как легко вставить массив из трех элементов в одну из строк, но я не знаю, как заполнить все 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.