Lightning Layout Code Snippet

Lightning Layout Simplified

The Lightning Layout Base Lightning Component can be leveraged to structure pages and components used within Lightning contexts such as the Lightning Experience in a flexible way. The grid layout and responsive design support provide great flexibility, but may not be intuitive to Salesforce developers coming from a Visualforce background because there is nothing comparable in Visualforce. In this article, I explain it in terms that a non UI expert or someone not experienced in other UI frameworks (e.g., Bootstrap) can understand.

The Grid

The lightning:layout is a container type of component that contains lighting:layoutItem components. Together, the two components make up the grid system used to arrange and display the various elements within them. The grid system divides the lightning:layout into 12 equal columns. Each lightning:layoutItem specifies how much of a column it should occupy. Here is a simple example.

The above example results in two rows within the layout. The first row has two columns. One is 8 columns wide (8/12 of the layout) and the other is 4 columns wide (4/12 of the layout). The second row has one column which takes up the entire layout (12/12 of the layout). Note that there are no actual lightning:layoutRow (not a real component) or row elements of any sort. When multipleRows=”true” is specified the framework will automatically create a new row whenever it would go past 12 columns as it adds together the size attributes of each lightning:layoutItem. Here, it gets to 12 after it adds 4 to 8, so it creates a new row there.  As soon as the width (12) is exceeded, a new row is created. As the browser window grows and shrinks the column shares (8/12, 4/12, 12/12) are maintained. The multipleRows attribute defaults to false, so you need to remember to always include it and set it to true if you want the automatic wrapping (which you probably do).

Responsive Design

Responsive design is the concept that the page should automatically restructure itself to present the best experience for the size of the viewing screen (i.e., viewport). Typically, this just means that the page will look different on the desktop and phone, and maybe tablet. A wide page on the desktop may not work well on the small screen of a phone.

The way this is accomplished without a UI framework, is by using CSS media queries to apply different CSS rules when the size of the viewport crosses certain limits, referred to as breakpoints. The lightning:layoutItem component has additional attributes that allow developers to specify how many columns a lightning:layoutItem should take up when a given breakpoint is reached: smallDeviceSize, mediumDeviceSize, largeDeviceSize. Developers do not need to write any CSS.

Mobile / Small First

The easiest way to think about how the responsive design works is to start at the smallest size and work your way up. Often times, demonstrations of responsive design start with a desktop view and shrink the browser down to show the page responding to the smaller size that would show up on a phone. While this makes sense from a demonstration standpoint, it is backwards of how the lightning:layoutItem attributes are used. The size attribute specifies how many columns should be taken by the lightning:layoutItem of the 12 from the lightning:layout. If no other attributes are specified then it is the size for every other device size. If another attribute such as mediumDeviceSize is specified, then the size value will be used up until the mediumDeviceSize is reached and then the medimumDeviceSize will be used.

The key way to remember what to specify is that it starts at the smallest and when it gets to a larger size, uses what is specified in the larger sizes if they are there. The above video emphasizes this by starting with the small window and expanding up.

Nesting

Nesting of layouts is another area that can be confusing. The key thing to remember with nesting is that the lightning:layout grid is divided into 12 columns. So, if you have a pair of nested components that needs to stack on top of eachother and span the entire width of their containing lightning:layoutItem, then you simply give them each a size=”12″ to indicate that they should each take up 12 columns and place them inside of a lightning:layout that is inside of the outer lightning:layoutItem.

More

Working with multiple levels and designing for different device sizes can be intimidating for folks who do not have experience with web UI frameworks, but having a conceptual understanding of how the Lightning Component Framework handles lightning:layout/layoutItem can make it easy for developers to build responsive pages and components. I  recommend drawing out diagrams with boxes and numbers on a piece of paper first, and then translating the drawing to lightning:layout/layoutItem components within the code. You can find more about lightning:layout and lightning:layoutItem, including examples in the Lightning Component Library documentation.