How to use lightning:layout and lightning:layoutItem?



A lightning:layout is a flexible grid system for arranging containers within a page or inside another container. The default layout is mobile-first and can be easily configured on different devices.


Lightning:layout is simplify to write HTML tag code.It is basically a <div class=”slds-grid”></div>.


Lightning:layout can be customized by using different attribute values:

  1. horizontalAlign
  2. verticalAlign
  3. pullToBoundary
  4. multipleRows



It determines how to spread the layoutItems horizontally.It has four values:

  1. space
  2. spread
  3. center
  4. end

Here is the code:

Here is the design:


It determines how to spread the layout Items vertically. It has four values:

  1. start
  2. center
  3. end
  4. Stretch


Here is the code:


Here is the design:


If padding is used on layout Items, this attribute pulls the element on either side of the container to the boundary by giving margin.Choose the size that corresponds to the size on layout Items. It has three value:

  1. Small ( margin-*(left/right): -12px)
  2. Medium ( margin-*(left/right): -16px)
  3. Large ( margin-*(left/right): -24px)


It determines whether the child element is wrap or not when they exceed the layout width.If it is true, then items wrap to the following line. Its default value is false.





A lightning:layoutItem is the basic element within lightning:layout. We can arrange one or more lightning:layoutItem. It enables how to configure the lightning:layoutItems size on different device sizes.

Lightning:layoutItems can be customized by using the different attribute values:

  1. size (for all devices)
  2. smallDeviceSize (for larger than mobile)
  3. mediumDeviceSize (for larger than tablet)
  4. largeDeviceSize (for larger than desktop)
  5. flexibility
  6. alignmentBump
  7. padding


Note: If the smallDeviceSize, mediumDeviceSize and largeDeviceSize attributes are specified, the size attribute is required.



If the viewport is divided into 12 parts, this deviceSize attributes indicate the relative space of the container occupies. It is expressed as an integer from 1 through 12.


Here is the code:


Here is the design:




It makes the item flexy so that it absorbs any extra space in its container or shrinks when there is less space. It has six values;

  1. auto
  2. shrink
  3. no-shrink
  4. grow
  5. no-grow
  6. None


Here is the code:


Here is the design:

Layout Item with flex


These attribute force the layoutItem to alignment with bump.It has four values:

  1. left
  2. right
  3. top
  4. Bottom



Here is the code:


Here is the design:

Layout Item with Alignment Bump


It sets the padding either left or right side of the layoutItem. It has six values:

  1. horizontal-small
  2. horizontal-medium
  3. horizontal-large
  4. around-small
  5. around-medium
  6. around-large



Here is the code


Here is the design:

Layout Item with padding

To know more about the lightning:layout and lightning:layoutItem refer to

Find Out How We Can Help

If you're ready to find out more about how SimplusLabs can help energize your workers, your customers, and your business with a different experience, let's talk.