Learning Salesforce Lightning Application Development

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> ...