Grid layout break within dom-repeat

Question

Within a polymer element I am trying to build a simple multi-column layout with lost-grid to render a list of items using dom-repeat. It looks like this:

HTML

<div class="grid"> 
  <template is="dom-repeat" items="{{data}}">
     <div class="grid__col">Example Content</div>
  </template>
</div>

CSS

.grid {
  lost-utility: clearfix;
  lost-center: 100%;
  position: relative;
}
.grid__col {
  lost-column: 1/2 2 0px; 
}

For example if the data array assigned to dom-repeat has 4 items, the following HTML is rendered:

<div class="grid"> 
  <div class="grid__col">Example Content</div>
  <div class="grid__col">Example Content</div>
  <div class="grid__col">Example Content</div>
  <div class="grid__col">Example Content</div>
</div>

Instead of displaying the columns at 50% width, the layout breaks and they are stacked on top of each other. If I remove the dom-repeat and list the 4 columns manually, it works. In both cases the code is the same in the end, so I'm guessing the rendering of the template somehow messes with the total width the columns can take up.

Another thing to note is that when using the exact same code inside a dom-bind template directly in the body of the page (outside of a polymer element but using dom-repeat), it works.

Answer 1

I just quickly read about lost. If you must use it I can't give you a specific answer, but if you only have a couple of divs that you are aligning, Polymers layout manager seems sufficient.

In a similar situation I was using the wrap layout and the calc() CSS operator (which seems to be in use behind the scenes with lost anyway).

<div class='horizontal layout wrap'>

Lots of divs here with template repeat

</div>

This is a rudimentary example and would need to be customized of course.

Hope this helps.

Answer 2

I suspect this may be due to shadow DOM. Are you using shadow DOM or are you using shady DOM? If you are using shadow DOM, you will need to add the CSS inside of your element's dom-module in order for it to take effect.

In other words, you should have something like this:

<dom-module id="an-element-with-grid">
    <link rel="import" type="css" href="an-element-with-grid.css"> <!-- This will be the home of your lost CSS -->
    <template>
        <div class="grid"> 
            <template is="dom-repeat" items="{{data}}">
                <div class="grid__col">Example Content</div>
            </template>
        </div>
    </template>
</dom-module>

This is per the shadow DOM spec. Nodes inside an element's shadow DOM are hidden from outside scopes, to prevent outside styles from stepping on your element's internal styles.