How to use lightning:layout and lightning:layoutItem?

Lightning:Layout

 

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

 

horizontalAlign

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:


verticalAlign

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:

pullToBoundary

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)

multipleRows

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.

 

 

Lightning:layoutItem

 

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.

 

Size

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:

1
2
3
4
5
6
7
8

Layout

Flexibility

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

Example:

Here is the code:

 

Here is the design:

Layout Item with flex

alignmentBump

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

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

 

Example:

Here is the code:

 

Here is the design:

Layout Item with Alignment Bump

Padding

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

 

Example:

Here is the code

 

Here is the design:

Layout Item with padding

To know more about the lightning:layout and lightning:layoutItem refer to
https://developer.salesforce.com/docs/component-library/bundle/lightning:layout/example
https://developer.salesforce.com/docs/component-library/bundle/lightning:layoutItem/example

Write a Response

Your email address will not be published.


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.