The Lightning:layout and Lightning:layoutItem components allow you to create the layout inside aura:component. The attributes for the Lightning:layout and Lightning:layoutitem components are shown in the following table:
- Lightning:layout:
| Name | Type | Description |
| class | string | A CSS class for the outer element, in addition to the component's base classes. |
| title | string | Displays tooltip text when the mouse moves over the element. |
| horizontalAlign | string | Determines how to spread the layout items horizontally. The alignment options are center, space, spread, and end. |
| verticalAlign | string | Determines how to spread the layout items vertically. The alignment options are start, center, end, and stretch. |
| multipleRows | Boolean | Determines whether to wrap the child items when they exceed the layout width. If true, the items wrap to the following line. This value defaults to false. |
| pullToBoundary | string | Pulls layout items to the layout boundaries and corresponds to the padding size on the layout item. Possible values are small, medium, or large. |
- Lightning:layoutitem:
| Name | Type |
Description |
| class | string |
A CSS class for the outer element, in addition to the component's base classes. |
| title | string |
Displays tooltip text when the mouse moves over the element. |
| size | integer |
If the viewport is divided into 12 parts, size indicates the relative space the container occupies. Size is expressed as an integer from 1 through 12. This applies for all device-types. |
| smallDeviceSize | integer |
If the viewport is divided into 12 parts, this attribute indicates the relative space the container occupies on device-types larger than a mobile. It is expressed as an integer from 1 through 12. |
| mediumDeviceSize | integer |
If the viewport is divided into 12 parts, this attribute indicates the relative space the container occupies on device-types larger than a tablet. It is expressed as an integer from 1 through 12. |
| largeDeviceSize | integer |
If the viewport is divided into 12 parts, this attribute indicates the relative space the container occupies on device-types larger than a desktop. It is expressed as an integer from 1 through 12. |
| flexibility | object |
Make the item fluid so that it absorbs any extra space in its container or shrinks when there is less space. Allowed values are: auto (columns grow or shrink equally as space allows), shrink (columns shrink equally as space decreases), no-shrink (columns don't shrink as space reduces), grow (columns grow equally as space increases), no-grow (columns don't grow as space increases), no-flex (columns don't grow or shrink as space changes). Use comma-separated values for multiple options, such as auto, no-shrink. |
| padding | string |
Sets padding to either the right or left sides of a container, or all sides of a container. Allowed values are horizontal-small, horizontal-medium, horizontal-large, around-small, around-medium, and around-large. |