고정 행과 열이있는 폴리머 격자

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 개 요소 오래되고 싶어하고 내가 원하는 그리드에 이러한 값을 채 웁니다. 현재 설정에서이 작업을 수행 할 수 있습니까? 아니면 이와 같은 그리드 시스템을 사용하지 않아야합니까?

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

이 사용할 수있는 핵심 구성 요소입니다 :

Answer 1

비 응답 그리드 레이아웃을 위해 설계하지만, 당신이 여기 사용할 수있는 사용자 정의 폴리머 성분이이 있었는지 폴리머 아니다 직접 만들거나 자신이 만든 사용자 지정 구성 요소에 상속됩니다. Demo.Html은 Core-Grid에서 작성된 컨트롤의 예를 보여줍니다.