How to use lightning:layout and lightning:layoutItem?

force record


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:


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:


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:

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

Back to list

Leave a Reply

Your email address will not be published. Required fields are marked *