Ui Extensions: `<Grid/>` vs `<s-grid/>` regressions

Extensions
,
1

While working on our React to Preact migration, we’ve hit roadblocks for this component.

React: Grid
Preact: s-grid

Would it be possible to address the following regressions?:

  • columns and rows - Replaced by gridTemplateColumns and gridTemplateRows While the syntax is more flexible (Thank you!), it has lost its MaybeResponsive signature, this used to allow for fine-tuned templates that were responsive. Could we restore this regression?

Thank you very much!

2

Hey,

can you describe what (responsive) values you were setting for columns and rows before?

If you could share some code examples, that would be wonderful.

Thanks!

3

I believe the new way to do this is with a Query container.

For example:

<s-query-container>
  <s-grid
    gridTemplateColumns="@container (inline-size > 500px) 1fr 1fr 1fr 1fr, 1fr 1fr"
    gap="small-200"
    alignItems="center"
  >
    .......
  </s-grid>
</s-query-container>
4

Thanks @bkspace, that worked!

My bad @Robin-Shopify, I posted before testing because I saw the type in my IDE as just string
image

Weird, the type in the docs is correct though

image

I’m on "@shopify/ui-extensions": "2026.4.0" if that’s worth a look into!