Responsive layouts with Customer Account UI Extensions (4 breakpoints)

Extensions
1

Hi everyone,

I’m currently developing a Shopify Customer Account UI Extension using Preact and the new Web Components.

I’m trying to build a responsive grid layout that adapts to different sizes, for example:

Mobile → 1 column
Tablet → 2 columns
Small desktop → 3 columns
Large desktop → 4 columns

What is the recommended approach?

Thanks in advance,
Max

2

Have you looked at query container?

3

Hi Luke,

Thank you for your reply!
Yes, I saw the component, but I can only replicate the queries for two breakpoints.

For example:

Using 2 values (works properly):
gridTemplateColumns=@container (inline-size > 749px) 1fr 1fr 1fr 1fr, 1fr"

Using 4 values (doesn’t work):
gridTemplateColumns=“@container (inline-size > 1181px) 1fr 1fr 1fr 1fr, @container (inline-size > 915px) 1fr 1fr 1fr, @container (inline-size > 749px) 1fr 1fr, 1fr”

Unfortunately, I can’t find a solution by reading the Shopify documentation.
Is there something I’m missing?
Could you please give me an example of how to use multiple breakpoints?

Thanks!