Code By Code – Lightning Framework – Chapter 14 – Grid Layouts

Code By Code – Lightning Framework – Chapter 14 – Grid Layouts

Topics for this chapter:

  • Understanding Lightning Grid Layout
  • Complete Code Of CarSearch And CarSearchForm Component

The Grid System in Lightning Design System is based on Flexbox (Flexible Box) – a CSS3 layout mode that makes sure elements will render properly on any screen size or display type. Each grid can have a maximum of 12 column.

In Lightning Framework, creating layouts is very easy with the use of 2 lightning components, which are:

  • lightning:layout – Parent container or main grid. You can have child lightning:layoutItem components in this parent component. This component can have multiple rows as well with the help of multipleRows=”true” attribute.
  • lightning:layoutItem – Child component or columns of the parent component. You can define the device-specific size in this component. Example:
    – size = required attribute*, accepts any number between 1-12
    – smallDeviceSize = size in mobile device, accepts any number between 1-12
    – mediumDeviceSize = size in tablets and ipad, accepts any number between 1-12
    – largeDeviceSize = size in large screens like desktops and laptops, accepts any number between 1-12


<lightning:layout horizontalAlign=”center”>
<lightning:layoutItem padding=”around-medium”>
<lightning:button variant=’neutral’ label=’New’ onclick=”{!c.createRecord}”/>

Lightning Component Development Day7 - Aura Method, Understand Layouts, Call Child Component Action

Understanding Lightning Layouts

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

Leave a Reply

Close Menu