Issue with s-grid Web Component – Responsive Grid Layout Not Working Anymore

Polaris
1

I’m using the s-grid web component to create a responsive grid layout in my Shopify embedded app. The configuration I’ve used is as follows:

<s-grid
  gridTemplateColumns="@container (inline-size <= 700px) 1fr, 2fr 5fr"
  gap="base"
></s-grid>

This setup used to work correctly for responsive behavior, but it’s no longer functioning as expected. I suspect there may have been recent changes to the CDN JavaScript file:
https://cdn.shopify.com/shopifycloud/app-bridge-ui-experimental.js

Has there been any update or deprecation related to s-grid or the way responsive rules are handled? Any insights or suggestions to resolve this would be greatly appreciated.

2

Hello! Yes, we are in the process of introducing a better way of handling responsive values. There should be documentation up soon about this, but the spoiler is that we will introduce a new component that allows you to place a container where ever you want, in addition to naming containers.

3

Thank you for the update @Anthony_Frehner

We are planning to upgrade our app using Polaris Web Components instead of the latest Polaris React version. Could you let us know when the next update is expected? We’re eagerly waiting for the final release.

Should we proceed with the migration using the currently available components, or wait for the major updates since it’s still in the candidate release phase?