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 defines the absolute positioned.
Syntax:
<element class="place-items-auto">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Place Items Class</b>
<div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
place-items-auto
h-48 bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-3/4 h-12">1</div>
<div class="bg-green-800 w-3/4 h-12">2</div>
<div class="bg-green-700 w-3/4 h-12">3</div>
<div class="bg-green-600 w-3/4 h-12">4</div>
<div class="bg-green-500 w-3/4 h-12">5</div>
<div class="bg-green-400 w-3/4 h-12">6</div>
</div>
</body>
</html>
|
Output:
place-items-start: This class displays the lines at the start of the flex container.
Syntax:
<element class="place-items-start">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Place Items Class</b>
<div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
place-items-start
h-48 bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-3/4 h-12">1</div>
<div class="bg-green-800 w-3/4 h-12">2</div>
<div class="bg-green-700 w-3/4 h-12">3</div>
<div class="bg-green-600 w-3/4 h-12">4</div>
<div class="bg-green-500 w-3/4 h-12">5</div>
<div class="bg-green-400 w-3/4 h-12">6</div>
</div>
</body>
</html>
|
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:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Place Items Class</b>
<div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
place-items-end
h-48 bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-3/4 h-12">1</div>
<div class="bg-green-800 w-3/4 h-12">2</div>
<div class="bg-green-700 w-3/4 h-12">3</div>
<div class="bg-green-600 w-3/4 h-12">4</div>
<div class="bg-green-500 w-3/4 h-12">5</div>
<div class="bg-green-400 w-3/4 h-12">6</div>
</div>
</body>
</html>
|
Output:
place-items-center: This class aligns flex items at the center of the container.
Syntax:
<element class="place-items-center">...</element>
Example:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Place Items Class</b>
<div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
place-items-center
h-48 bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-3/4 h-12">1</div>
<div class="bg-green-800 w-3/4 h-12">2</div>
<div class="bg-green-700 w-3/4 h-12">3</div>
<div class="bg-green-600 w-3/4 h-12">4</div>
<div class="bg-green-500 w-3/4 h-12">5</div>
<div class="bg-green-400 w-3/4 h-12">6</div>
</div>
</body>
</html>
|
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:
HTML
<!DOCTYPE html>
<head>
<link href=
rel="stylesheet">
</head>
<body class="text-center">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Place Items Class</b>
<div id="main" class="ml-24 h-48 w-2/3 grid grid-cols-3 gap-2
place-items-stretch
h-48 bg-green-200 border-solid border-4
border-green-900">
<div class="bg-green-900 w-3/4">1</div>
<div class="bg-green-800 w-3/4">2</div>
<div class="bg-green-700 w-3/4">3</div>
<div class="bg-green-600 w-3/4">4</div>
<div class="bg-green-500 w-3/4">5</div>
<div class="bg-green-400 w-3/4">6</div>
</div>
</body>
</html>
|
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
23 Mar, 2022
Like Article
Save Article