Lightning Layout Simplified
Lightning Layout lets you create a layout, a structure for your page. It is a flexible grid system for arranging containers within a page or inside another container.
Let’s learn about the grid system before diving into the lighting layouts.
Grid System
Lightning Layout is a grid system i.e It separates a page into major sections. It offers a grid-based layout system having rows and columns. It makes the designing of pages easy without positioning and floating.
You can have up to 12 columns in your grid.
You can structure your layout using these 12 equal size blocks.
Suppose you are planning to create a layout with a left navigation pane and a right container body.
You can structure the layout to have 3 blocks for the navigation pane and the remaining 9 blocks for the container body.
In the above diagram, we have specified how much of a column is to be occupied by the left navigation pane and the right container body.
Size = 3 implies that it is using 3 columns for the left navigation pane.
Size = 9 implies that it is using 9 columns for the right container body.
lightning:layout & lightning:layoutItem
lightning:layout component lets you create a container where you will be adding lightning:layoutItem.
In the below diagram you can see that the lightning:layout is a parent container which has lightning:layoutItem with size of the columns specified in the size attribute.
Let’s explore them with few examples.
Please create an Aura Component – MyLayoutComponent to play with the below examples.
Example – Simple Lightning Layout
Please save the below code in the MyLayoutComponent.
<aura:component>
<lightning:layout >
<lightning:layoutItem>
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component> In the above component markup, we have created a parent container using lightnign:layout component. Inside this, we have added lightning:layoutItem component.
.THIS .div-block{
border: solid rgb(0, 183, 255) 2px;
padding:2rem;
}When you preview this component from an Aura App, below is the output:
In the lightning:layoutItem we have not specified the size of the columns using the size attribute. So it is only taking the size it required the render the elements which are present inside it.
Also, as we have not defined any alignment attribute so elements are rendered on the screen as default
Example – Lightning Layout With Horizontal Align
Use the horizontalAlign attribute to align the layout item horizontally on the screen.
The alignment options are center, space, spread, and end.
Please save the below code in the MyLayoutComponent
<aura:component>
<hr/>
<code>horizontalAlign="space"</code>
<lightning:layout horizontalAlign="space">
<lightning:layoutItem>
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
<hr/>
<code>horizontalAlign="spread"</code>
<lightning:layout horizontalAlign="spread">
<lightning:layoutItem>
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
<hr/>
<code>horizontalAlign="center"</code>
<lightning:layout horizontalAlign="center">
<lightning:layoutItem>
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
<hr/>
<code>horizontalAlign="end"</code>
<lightning:layout horizontalAlign="end">
<lightning:layoutItem>
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
<hr/>
</aura:component> Below is the preview of the component:
Example – Lightning Layout With Vertical Align
Use the verticalAlign attribute to align the layout item horizontally on the screen.
The alignment options are start, center, spread, and strech.
Please save the below code in the MyLayoutComponent
<aura:component>
<code>verticalAlign="start"</code>
<lightning:layout verticalAlign="start" class="layout-block">
<lightning:layoutItem>
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
<code>verticalAlign="center"</code>
<lightning:layout verticalAlign="center" class="layout-block">
<lightning:layoutItem>
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
<code>verticalAlign="spread"</code>
<lightning:layout verticalAlign="spread" class="layout-block">
<lightning:layoutItem>
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
<code>verticalAlign="strech"</code>
<lightning:layout verticalAlign="strech" class="layout-block">
<lightning:layoutItem>
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem>
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component> .THIS .div-block{
border: solid rgb(0, 183, 255) 10px;
padding:2rem;
}
.THIS.layout-block{
height:10rem;
border:solid rgb(206, 206, 206) 1px;
margin-bottom:1rem;
}Below is the preview of the component:
In the above screen shot as you can see that the vertical alignment for lightning:layoutitem is set in context of its parent lightning:layout.
Example – Lightnign Layout With Column Size Specified
Use the size attribute in the lightning:layoutItem component to specify the column size.
You can specify from 1-12 for the size of the column layout item can occupy.
Please save the below code in the MyLayoutComponent
<aura:component>
<lightning:layout verticalAlign="start">
<lightning:layoutItem size="3">
<div class='div-block'>Hey!</div>
</lightning:layoutItem>
<lightning:layoutItem size="12">
<div class='div-block'>Have an awesome day :)</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component> .THIS .div-block{
border: solid rgb(0, 183, 255) 2px;
padding:2rem;
}Below is the preview of the component:
Example – Nested Lightning Layout
Let’s create a layout having a header, a left navigation pane, a main body in the right and a footer.
We will implement this using the nested layout and specifying the column size.
Please save the below code in the MyLayoutComponent.
<aura:component>
<lightning:layout multipleRows="true">
<lightning:layoutItem size="12">
<div class='div-block'>Header</div>
</lightning:layoutItem>
<lightning:layoutItem size="12">
<lightning:layout>
<lightning:layoutItem size="3">
<div class='div-block'>Left Navigation Pane</div>
</lightning:layoutItem>
<lightning:layoutItem size="9">
<div class='div-block'>Main Body</div>
</lightning:layoutItem>
</lightning:layout>
</lightning:layoutItem>
<lightning:layoutItem size="12">
<div class='div-block'>Footer</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component> Below is the preview of the component:
Example – Responsive Lightning Layout To Handle Multiple Devices
Lets create a responsive layout such that we have three blocks and it should be displayed horizontally when the device size is large or medium and should stack upon each other for a smaller device.
Please save the below code in the MyLayoutComponent.
<aura:component>
<lightning:layout multipleRows="true">
<lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="4" largeDeviceSize="4" size="12">
<div class='div-block'>Block 1</div>
</lightning:layoutItem>
<lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="4" largeDeviceSize="4" size="12">
<div class='div-block'>Block 2</div>
</lightning:layoutItem>
<lightning:layoutItem smallDeviceSize="12" mediumDeviceSize="4" largeDeviceSize="4" size="12">
<div class='div-block'>Block 3</div>
</lightning:layoutItem>
</lightning:layout>
</aura:component> In the above component we have specified device specific column sizes using attributes – smallDeviceSize, mediumDeviceSize and largeDeviceSize
For a smaller device the size is sepcified as 12 so the blocks will stack upon each other.
Below is the preview of the component for a large size device:
Below is the preview of the component for a small size device:
Reduce the browser window size and you will notice that the blocks are now stacked upon each other.
So by this line you have covered a good information for lightning layout.
You can explore more by updating the MyLayoutComponent and play around 🙂
Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂
Very good article.!!!!
Thank you 🙂