[Layout Grid] Include an ability for mdc-layout-grid to look at the container width instead of the window width to determine if breakpoint needs to be changed

I’ve noticed that mdc-layout-grid looks at the window width when determines which breakpoint to use. It means that if a component with mdc-layout-grid is part of some other container the breakpoint is not switched until the width of the browser window (more precisely the viewport) crosses the breakpoint width boundary. This leads to the mdc-layout-grid not changing layout even though the container width that it is enclosed in is less than a breakpoint target width. This demonstrates what I mean.

<table>
        <tr>
          <td style="min-width: 220px;">left</td>
          <td>
            <div class="mdc-layout-grid">
              <div class="mdc-layout-grid__inner">
                <div
                  class="mdc-layout-grid__cell--span-2-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone"
                  style="height: 150px; background-color: red;"
                ></div>
                <div
                  class="mdc-layout-grid__cell--span-2-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone"
                  style="height: 150px; background-color: red;"
                ></div>
                <div
                  class="mdc-layout-grid__cell--span-2-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone"
                  style="height: 150px; background-color: red;"
                ></div>
                <div
                  class="mdc-layout-grid__cell--span-2-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone"
                  style="height: 150px; background-color: red;"
                ></div>
                <div
                  class="mdc-layout-grid__cell--span-2-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone"
                  style="height: 150px; background-color: red;"
                ></div>
                <div
                  class="mdc-layout-grid__cell--span-2-desktop mdc-layout-grid__cell--span-4-tablet mdc-layout-grid__cell--span-4-phone"
                  style="height: 150px; background-color: red;"
                ></div>
              </div>
            </div>
          </td>
          <td style="min-width: 220px;">
            right
          </td>
        </tr>
      </table>

[peterlitvak]

Thank you!

[allan-chen]

Hi, Thanks for reaching out. This component was implemented according to Material Design guidelines to account for viewport widths only. As Simon suggested, for your use case, it might be best to use a solution that polyfills element queries.