1

Standard layout component <lightning-layout> from Lightning Design Bundle in LWC provide several options to arrange children components:

using horizontal-align="spread" would spread children components horizontally which is the part of what I am looking for but it uses too much space in between, also, it has extra space on the top and bottom enter image description here

using Vertical Align (Stretch) would spread children components both horizontally and vertically and it seems this supplies what I am looking for, however, I am not able to scroll to find the corresponding code and when I apply or it doesn't work for me as it looks in this example enter image description here

How can I achieve children arrangement occupying all space horizontally? How can I find the corresponding code?

1 Answer 1

2

How can I find the corresponding code?

To find the corresponding code one can use "Open in Playground button" enter image description here See this in action enter image description here Once we opened playground, we have to scroll to the corresponding code.

How can I achieve children arrangement occupying all space horizontally?

To stretch items horizontally it is enough just to set flexibility:auto to children component. Refer to lightning-layout-item specification and to the auto flexibility example here enter image description here By removing padding="around-small" in this example, we could achieve full stretch

enter image description here

You must log in to answer this question.

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