Tailwind CSS Place Items
This class accepts a wide range of values. It's a replacement for the CSS Place Items property. This class is used to manage how things are justified while still being aligned. As a result, the align-items and justify-items classes' values can be stored in the place-items class.
Place Items Classes
- place-items-auto
- place-items-start
- place-items-end
- place-items-center
- place-items-stretch
place-items-auto
If there are no parents for the objects, this class is used to describe the absolute positioning.
Syntax:
<element class="place-items-auto">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Place Items Class - Tailwind CSS </b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-auto h-48 bg-red-200 border-solid border-4 border-red-900"> <div class="bg-red-900 w-3/4 h-12">1</div> <div class="bg-red-800 w-3/4 h-12">2</div> <div class="bg-red-700 w-3/4 h-12">3</div> <div class="bg-red-600 w-3/4 h-12">4</div> <div class="bg-red-500 w-3/4 h-12">5</div> <div class="bg-red-400 w-3/4 h-12">6</div> </div> </body> </html>
Output:
place-items-start
The lines at the beginning of the flex container are displayed by this class.
Syntax:
<element class="place-items-start">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Place Items Class - Tailwind CSS </b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-start h-48 bg-red-200 border-solid border-4 border-red-900"> <div class="bg-red-900 w-3/4 h-12">1</div> <div class="bg-red-800 w-3/4 h-12">2</div> <div class="bg-red-700 w-3/4 h-12">3</div> <div class="bg-red-600 w-3/4 h-12">4</div> <div class="bg-red-500 w-3/4 h-12">5</div> <div class="bg-red-400 w-3/4 h-12">6</div> </div> </body> </html>
Output:
place-items-end
The flex lines at the end of the flex container are displayed by this class.
Syntax:
<element class="place-items-end">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Place Items Class - Tailwind CSS </b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-end h-48 bg-red-200 border-solid border-4 border-red-900"> <div class="bg-red-900 w-3/4 h-12">1</div> <div class="bg-red-800 w-3/4 h-12">2</div> <div class="bg-red-700 w-3/4 h-12">3</div> <div class="bg-red-600 w-3/4 h-12">4</div> <div class="bg-red-500 w-3/4 h-12">5</div> <div class="bg-red-400 w-3/4 h-12">6</div> </div> </body> </html>
Output:
place-items-center
This class places flex objects in the container's center.
Syntax:
<element class="place-items-center">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Place Items Class - Tailwind CSS </b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-center h-48 bg-red-200 border-solid border-4 border-red-900"> <div class="bg-red-900 w-3/4 h-12">1</div> <div class="bg-red-800 w-3/4 h-12">2</div> <div class="bg-red-700 w-3/4 h-12">3</div> <div class="bg-red-600 w-3/4 h-12">4</div> <div class="bg-red-500 w-3/4 h-12">5</div> <div class="bg-red-400 w-3/4 h-12">6</div> </div> </body> </html>
Output:
place-items-stretch
This class specifies that the line is stretched to fill the flex container's remaining space. It's the default setting.
Syntax:
<element class="place-items-stretch">...</element>
Example:
<!DOCTYPE html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <h1 class="text-red-600 text-5xl font-bold"> Tutorial and Example </h1> <b>Place Items Class - Tailwind CSS </b> <div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2 place-items-stretch h-48 bg-red-200 border-solid border-4 border-red-900"> <div class="bg-red-900 w-3/4">1</div> <div class="bg-red-800 w-3/4">2</div> <div class="bg-red-700 w-3/4">3</div> <div class="bg-red-600 w-3/4">4</div> <div class="bg-red-500 w-3/4">5</div> <div class="bg-red-400 w-3/4">6</div> </div> </body> </html>
Output:
