Lightning layout to handle multiple devices

The layoutItem has attributes to specify the size of different device types. To further understand this, consider the following markup code. Use the Developer Console to create a Lightning Component, copy the markup, and preview the application to observe the output. For this, shrink your browser window to observe the output.

The code is as follows:

<aura:application extends="force:slds">
<Lightning:layout verticalAlign="start" multipleRows="true">
<Lightning:layoutItem flexibility="auto" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3" padding="around-small" size="12">
<Lightning:card title="1">
<p class="slds-p-horizontal_small">
Card 1
</p>
</Lightning:card>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" size="12" padding="around-small" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
<Lightning:card title="2">
<p class="slds-p-horizontal_small">
Card 2
</p>
</Lightning:card>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" size="12" padding="around-small" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
<Lightning:card title="3">
<p class="slds-p-horizontal_small">
Card 3
</p>
</Lightning:card>
</Lightning:layoutItem>
<Lightning:layoutItem flexibility="auto" size="12" padding="around-small" smallDeviceSize="6" mediumDeviceSize="4" largeDeviceSize="3">
<Lightning:card title="4">
<p class="slds-p-horizontal_small">
Card 4
</p>
</Lightning:card>
</Lightning:layoutItem>
</Lightning:layout>
</aura:application>

The output for various device sizes are as follows. The following is the output for a large device:

The following is the output for a medium device:

The following is the output for smaller devices:

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.122.68