css - Polymer grid with fixed rows and cols -
For an application that uses "post-text" itemprop = "text">
I need a 3x3 grid. It is not necessary to be responsive because it always has a fixed screen Should be displayed on any device with Currently it looks like my grid:
& lt; Div flex style = "height: calc (100% / 3);" Horizontal Layout Flex & gt; & Lt; Div flex style = "height: 100%;" & Gt; Content & lt; / Div & gt; & Lt; Div flex style = "height: 100%;" & Gt; Content & lt; / Div & gt; & Lt; Div flex style = "height: 100%;" & Gt; Content & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div flex style = "height: calc (100% / 3);" Horizontal Layout Flex & gt; & Lt; Div flex style = "height: 100%;" & Gt; Content & lt; / Div & gt; & Lt; Div flex style = "height: 100%;" & Gt; Content & lt; / Div & gt; & Lt; Div flex style = "height: 100%;" & Gt; Content & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div flex style = "height: calc (100% / 3);" Horizontal Layout Flex & gt; & Lt; Div flex style = "height: 100%;" & Gt; Content & lt; / Div & gt; & Lt; Div flex style = "height: 100%;" & Gt; Content & lt; / Div & gt; & Lt; Div flex style = "height: 100%;" & Gt; Content & lt; / Div & gt; & Lt; / Div & gt;
Now, I have to populate it with materials from some object. I know that I can easily insert an array of 3 elements in one line, but I do not know how to populate all 9 content-fields with an array of 9 elements.
& lt; Div Flex style = "height: calc (100% / 3);" Horizontal Layout Flex & gt; & Lt; Template repeat = "{{class in main categories}}" & gt; & Lt; Div Flex style = "height: 100%; background color: {{category.color}};" & Gt; {{Class.text}} & lt; / Div & gt; & Lt; / Template & gt; & Lt; / Div & gt;
And this is the same object (which looks like exactly 3 elements, otherwise it is messed up):
Polymer ('my-app' , {"Text:": "cat 1", "color": "red"}, {"lesson": "cat 2", "color": "green"}, {"lesson": "cat 3 "," color ":" yellow "}]});
But I want it to be main categories
object equal to 9 elements and I want to populate the grid with these values. Is it possible with the current setup, or should I not use a grid-system like this?
A non-responsive grid layout is not how it was designed for polymer, but There is is a custom polymer component that you can use here:
This is a core component that is directly or a custom component Can be inherited by the demo. HTML shows an example of creative control from the core-grid.
Comments
Post a Comment