Responsive value query is not working in nested condition for s-grid gridTemplateColumn

Polaris
1

I am using s-grid with value for gridTemplateColumn as Responsive value.

gridTemplateColumns={`@container (inline-size < ${tokens.breakpoints.sm}) 'repeat(4, 1fr)', (inline-size < ${tokens.breakpoints.md}) 'repeat(8, 1fr)', 'repeat(16, 1fr)'`}

It only works for md breakpoint the sm breakpoint never hits.

2

Hey @Ashutosh_Vyas . Thanks for flagging this. Looking at your responsive grid setup, I think the issue could potentially be with how the container query syntax is being parsed. The responsive value syntax works as a binary if-else statement, so when you have multiple breakpoints you need to nest them or use compound conditions with ranges. Can you try using compound conditions like this:

gridTemplateColumns={`@container (inline-size < ${tokens.breakpoints.sm}) 'repeat(4, 1fr)', (${tokens.breakpoints.sm} <= inline-size < ${tokens.breakpoints.md}) 'repeat(8, 1fr)', 'repeat(16, 1fr)'`}

This should create an if-else-if-else chain where the middle condition explicitly defines the range between sm and md breakpoints. To help isolate whether it’s a syntax issue or a token value issue, could you also test with hardcoded pixel values like this:

gridTemplateColumns="@container (inline-size < 640px) 'repeat(4, 1fr)', (640px <= inline-size < 768px) 'repeat(8, 1fr)', 'repeat(16, 1fr)'"

Let me know if that behaves correctly. If the issue persists, could you also check your browser’s DevTools console and share any errors or warnings that might be appearing? That would help us dig deeper into what might be going on with the parsing. Hope this helps!

1 Like