The size breakpoints in SLDS are based on the screen size which works great for LWCs that occupy the full width of the screen e.g.:

<div class="slds-col slds-size_1-of-1 slds-medium-size_1-of-3">

But I'd like my LWC to layout correctly when it is in (flexi-) pages that present it in 2 or 3 or 4 columns side by side where the relevant width is only a part of the screen.

Any suggestions for how to handle this?

1 Answer 1


AFAIK this related mechanism Make a Component Width-Aware is the only mechanism available:

@api flexipageRegionWidth;

It reports the flexi-page "region’s width" as:


and you can use this name as a CSS style or otherwise react to the value such as using different SLDS classes. So a bit of work. See How to control LWC styling dynamically?.

But this is only a relative indication i.e. the relative size in page builder; the values do not change as the page is resized.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .