put lightning component horizontally in one line

Question

How can we put lightning component beside the each component?

I would like to put two components like the attachment in the record page, by changing the size of component width.

Anyone knows how to do it?

Answer 1

You can use lightning:layoutItem and lightning:layout to configure your component structure. As per docs:-

A lightning:layoutItem is the basic element within lightning:layout. You can arrange one or more layout items inside lightning:layout. The attributes of lightning:layoutItem enable you to configure the size of the layout item, and change how the layout is configured on different device sizes.

The layout system is mobile-first. If the size and smallDeviceSize attributes are both specified, the size attribute is applied to small mobile phones, and the smallDeviceSize is applied to smart phones. The sizing attributes are additive and apply to devices that size and larger. For example, if mediumDeviceSize=10 and largeDeviceSize isn’t set, then mediumDeviceSize will apply to tablets, as well as desktop and larger devices.

If the smallDeviceSize, mediumDeviceSize, or largeDeviceSize attributes are specified, the size attribute is required.

<aura:component extends="lightningcomponentdemo:exampleLayoutItemsBase">
    <div class="c-container">
        <lightning:layout multipleRows="true">
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">1</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">2</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">3</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">4</div>
            </lightning:layoutItem>
            <lightning:layoutItem size="4" padding="around-small">
                <div class="custom-box">5</div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>