css - Polymer grid with fixed rows and cols -

css - Polymer grid with fixed rows and cols -

for application uses polymer need 3x3 grid. not have responsive since should display on device screen. how grid looks:

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

now, need populate content object. know how can insert array of 3 elements 1 of rows, don't know how populate 9 content-areas array of 9 elements.

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

and object looks (exactly 3 elements, otherwise mess things up):

polymer('my-app', { maincategories: [ { "text" : "cat 1", "color" : "red" },{ "text" : "cat 2 ", "color" : "green" },{ "text" : "cat 3", "color" : "yellow" } ] });

but want maincategories object 9 elements long , want populate grid these values. possible current setup, or should not utilize grid-system this?

a non-responsive grid layout not polymer designed for, there is custom polymer component can utilize here:

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

this core component can used either straight or inherited custom component of own creation. demo.html shows illustration of command crated core-grid.

css polymer grid-layout