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:

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:

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:

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:

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:

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