Tailwind CSS Place Items

This class accepts lots of values in tailwind CSS. It is the alternative to the CSS Place Items property. This class is used for controlling how items are justified and aligned at the same time. So the place-items class can hold the value of the align-items and justify-items class values.

Place Items Classes:

• place-items-auto 
• place-items-start 
• place-items-end 
• place-items-center 
• place-items-stretch 

place-items-auto

If the items have no parents then this class is used that define the absolute position.

Syntax:

<element class="place-items-auto">...</element>

Example:

Output:

place-items-start

This class displays the lines at the start of the flex container.

Syntax:

<element class="place-items-start">...</element>

Example:

Output:

place-items-end

This class displays the flex lines at the end of the flex container.

Syntax:

<element class="place-items-end">...</element>

Example:

Output:

place-items-center

This class aligns flex items at the center of the container.

Syntax:

<element class="place-items-center">...</element>

Example:

Output:

place-items-stretch

This class defines that the line stretched to take the remaining space of the flex container. It is the default value.

Syntax:

<element class="place-items-stretch">...</element>

Example:

Output: