Tailwind CSS - Place Items

place-items utility in Tailwind CSS is used to set the alignment of both items along the vertical axis and items along the horizontal axis.

It combines two properties, align-items and justify-items. This utility aligns the grid items in both axes. The default value of this property is "stretch stretch" which aligns the item to the stretch position in both axes.

Syntax

<div class="place-items-{value}">
   <!-- Your code goes here -->
</div>

The value parameter specifies the alignment for the grid items in both axes.

Example

Let's take an example where we align the items using place-items utility in Tailwind CSS.

<div class="grid grid-cols-3 gap-4 place-items-center">
  <div class="text-center bg-blue-500 text-white font-bold">Box 1</div>
  <div class="text-center bg-blue-500 text-white font-bold">Box 2</div>
  <div class="text-center bg-blue-500 text-white font-bold">Box 3</div>
</div>

Output

Explanation

In the above example, we have used the place-items-center class which aligns the grid items to the center position in both vertical and horizontal axes.

Use

The place-items utility is useful in alignment of grid items on a web page by combining two properties, i.e., align-items and justify-items.

It can be used in combination with the grid utility to create responsive and flexible layouts. By using this utility, we can center the grid items or align them to the start or end position in both vertical and horizontal axes.

Important Points

• place-items is a utility class in Tailwind CSS used to align the grid items in both vertical and horizontal axis.
• The default value of place-items is "stretch stretch".
• This utility class is useful in creating responsive and flexible layouts.
• place-items combines two properties - align-items and justify-items.

Summary

In this tutorial, we have learned about the place-items utility class in Tailwind CSS. We have seen its syntax, examples, output, and explanation. We have also learned about its use and important points to keep in mind while using this utility class. With the help of this utility class, we can create responsive and flexible layouts by aligning the grid items in both horizontal and vertical axes.