CSS justify-items

The justify-items property in CSS is used to align the items inside a container along the inline axis (the x-axis for a row direction or the y-axis for a column direction). This property can be applied to a container to control the alignment of its items in the inline direction.

The values that can be assigned to the justify-items property are:

start: Aligns the items at the start of the container.
end: Aligns the items at the end of the container.
center: Aligns the items at the center of the container.
stretch: Stretches the items to fill the container.

Let's see how the justify-items property works with some examples:

Result:

Item 1

Item 2

Item 3

In the example above, we have set the justify-items property to start. This aligns the items at the start of the container along the inline axis.

Result:

Item 1

Item 2

Item 3

In this example, we have set the justify-items property to center. This aligns the items at the center of the container along the inline axis.

Result:

Item 1

Item 2

Item 3

Lastly, in this example, we have set the justify-items property to stretch. This stretches the items to fill the container along the inline axis.