Creating multiple rows and controlling the size of the row in Lightning layout

The size attribute on the Lightning:layoutItem allows you to control the size of the item and, with multiple rows, the cards can span across various rows.

Let's use the following code in a Lightning Application created via the Developer Console:

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

The output should look like the following screenshot:

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

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