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

Get Learning Salesforce Lightning Application Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.