Hi there,

upgraded to the latest version from 1.4.2. It doesn't seem to work for us. The layouting is not happening during browser resize (which it did before). The Demo is also not working, maybe let us start there.

Hi, the grid works fine when elements with the css classes i.e ["xs", "s", "m", "l", "xl"] are direct children of the element <iron-grid>, but breaks when using an element between.

Working code:

<div class="grid-container layout center"> <iron-grid> <div class="xs6 s6 m4 l4 layout center-justified"> <paper-button class="grid-button layout vertical"> <iron-icon icon="custom:clock-w"></iron-icon> <br/> <div>Time</div> </paper-button> </div> <div class="xs6 s6 m4 l4 layout center-justified"> <paper-button class="grid-button layout vertical"> <iron-icon icon="custom:ruler-w"></iron-icon> <br/> <div>Length</div> </paper-button> </div> ... </iron-grid>

Breaking code

<div class="grid-container layout center"> <iron-grid> <template is="dom-repeat" items="{{unitData}}"> <div class="xs6 s6 m4 l4 layout center-justified"> <paper-button class="grid-button layout vertical"> <iron-icon icon="[[item.icon]]-w"></iron-icon> <br/> <div>[[item.name]]</div> </paper-button> </div> </template> </iron-grid> </div>

CSS

paper-button.grid-button {
        width: 70%;
        background-color: var(--google-red-500);
        color: white !important;
        margin: 10px;
        text-transform: capitalize;
}
.grid-container {
        padding-top: 3vh;
}

Hello,

::content .offset-xs0-important class is missing.

Cheers,

Vincent

Would it be possible to implement something to hide columns?

I was thinking about maybe the classes s0 m0 l0?

That way I could hide certain columns on mobile:

<!-- Will not be shown on mobile -->
<div class="s0 m6">
Only for medium and large devices!
</div>

Thank you for this awesome element!

There is a good documentation but no live link demo. It could be interesting to add it.

Okay, only a couple weeks in on Polymer - so I could be way off base... I'm trying to build a responsive web site that works in iOS - hence Safari.

Case 1 - Wide: Show two columns side-by-side
Case 2 - Narrow: Drop the first column, only show the second full width.

For case 1 it's pretty easy to use in my case m3 and m9, e.g.,

<iron-grid>
    <div class="m3">foo</div>
    <div class="m9">bar</div>
</iron-grid>

For case 2 the 'obvious' thing to me is throw in an s0, or...

<iron-grid>
    <div class="s0 m3">foo</div>
    <div class="m9">bar</div>
</iron-grid>

This works well on Chrome. Two columns wide, drops/hides first column on small.

foo     bar

on 's' it is...

bar

On Safari it screws up. For the wide case it shows the first column, 'foo', but then goes to the next line to show 'bar'. i.e., output for 'm' is:

foo
bar

It works correctly on 's' then, i.e.,

bar

Hint/idea -- It turns out that if I make the second column into an 's8' it will fit on one row. In other words, somehow the 's0' could be taking up just enough space to screw up the math for the 12 columns.

Microsoft Edge
Not to confuse the above point - Edge works for 's' and 'm/l/xl', but when I get to 'xs' in the above case it reverts back to using the rules for 'm'. i.e., I thought the rule was for xs was to use the next larger size specified, i.e., it should behave like 's', not 'm'???

Or am I lost?

Thanks again - this seems like a great tool!!!

The bower.json file was changed in a8219b9 - and the trailing comma on line 25 breaks bower installs (it's not valid JSON).

When imported in project where already included polymer and my own webcomponents dependencies its totally break everything. After remove the first two (import) line from iron-grid.html its working like charm, but its too difficult remove these lines at every build. Do you have any idea how to solve this?

Please, mind the code bellow. Every time I refresh the page, in whatever column class it happens to be, the grid always shows the largest column class. For example, after a refresh, if the browser window is 470px wide, so the .xs class in utilized, instead of getting 1 card to be shown full-screen, I get 4 cards. I think it defaults to the largest class. I have to resize the window manually for the correct grid rule to apply.

Am I missing something in the correct use of iron-grid or is it a bug?

PS. Windows user here.

<iron-grid>
  <template is="dom-repeat" items="{{productsList}}" on-dom-change="_repeatRender">
    <div class="xs12 s6 m3 l3">
      <paper-card elevation="1" id="{{item.id}}" image="{{item.header}}" heading="{{item.name}}">
        <div class="card-content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut earum, quisquam in temporibus dolor facilis provident similique officiis velit blanditiis!
        </div>
        <div class="card-actions">
          <paper-button on-tap="_openCard">Open</paper-button>
        </div>
      </paper-card>
    </div>
  </template>
</iron-grid>

Hi!! I need use your component with polymer 2. I can do a PR with the changes in the code (content = slot) for the compatiblity of the component.

Is a interesting PR by the road map of the component?

I'm not sure why, but the offset-s0 was being ignored and overwritten by the medium one.
I changed it to offset-s0-important but that forced me to write down the offset for all the sizes instead of just medium.
<div class="xs12 s12 offset-xs0 offset-s0-important m6 offset-m3 offset-l3 offset-xl3">
It feels wrong to add so many classes. I expected it to work without the large and xl versions.

The latest 3.0.0 version is missing the registration script for the iron-grid-container element:

<script>
    Polymer({
        is: 'iron-grid-container',
    });
</script>

I think you're missing a dependency in bower.json to iron-media-query. I assume you want a dependency on PolymerElements/iron-media-query. If not, please mention it in the README.md

Hidding an element for a screen format does not work with the current version 3.0.0.

F.e. in the demo change

...
            <div class="s12 example blue">
                <p>s12</p>
            </div>
....

to

...
            <div class="s0 m12 example blue">
                <p>s12</p>
            </div>
...

The blue element is always hidden, also for medium size and larger.

Hi,

Could you advise to me how to put inner paper-input to full cell with

Hello! Some Polymer recent update broke the element. The column gets the right size, but they get all wrapped.
Even the demo is broken right now, as the screenshot shows:

Looks like this component is broken, because I can't get it to work correctly.

If I use s6 m4 as a class, only the last class get applied, so the div occupies 4/12 of the width, but resizing the viewport never toggles the s6 class correctly, it always stays 4/12 of it.

When I rewrited iron-grid. I based it on flexbox => https://css-tricks.com/snippets/css/a-guide-to-flexbox/

It is a powerfull system and add naturally a ton of fonctionnalities by default to iron-grid.

We shoould expose it to demonstrate the power.

Try this,

The s8 container break

<div class="s8">
        <div class="s12 example blue">
            <p>s12</p>
        </div>
        <div class="s12 m3 l2 example red">
            <p>s12 m3 l2</p>
        </div>
        <div class="s12 m6 l8 example red">
            <p>s12 m6 l8</p>
        </div>
        <div class="s12 m3 l2 example red">
            <p>s12 m3 l2</p>
        </div>
  </div>

I will make a pull request very soon. Just need to add "display :flex" on sizing classes