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

Popular posts from this blog

apache - 504 Gateway Time-out The server didn't respond in time. How to fix it? -

c# - .net WebSocket: CloseOutputAsync vs CloseAsync -

c++ - How to properly scale qgroupbox title with stylesheet for high resolution display? -