Place Content

v1.8.0+

Utilities for controlling how content is justified and aligned at the same time.

Center

Use to pack items in the center of the block axis:

Start

Use place-content-start to pack items against the start of the block axis:

<div class="grid grid-cols-3 bg-gray-200 place-content-start h-48">
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">4</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">6</div>
</div>

Use place-content-end to to pack items against the end of the block axis:

<div class="grid grid-cols-3 bg-gray-200 place-content-end h-48">
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">4</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">5</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">6</div>
</div>

Space between

Use place-content-between to distribute grid items along the block axis so that that there is an equal amount of space between each row on the block axis.

Space around

Use distribute grid items such that there is an equal amount of space around each row on the block axis:

<div class="grid grid-cols-3 bg-gray-200 place-content-around h-48">
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">4</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">5</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">6</div>

Use place-content-evenly to distribute grid items such that they are evenly spaced on the block axis:

<div class="grid grid-cols-3 bg-gray-200 place-content-evenly h-48">
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">4</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">5</div>
  <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">6</div>
</div>

Stretch

Use place-content-stretch to stretch grid items along their grid areas on the block axis:

Responsive

To place content at a specific breakpoint, add a {screen}: prefix to any existing utility. For example, use md:place-content-center to apply the place-content-center utility at only medium screen sizes and above.

<div class="place-content-start md:place-content-center">
  <!-- ... -->
</div>

For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.

By default, only responsive variants are generated for place-content utilities.

You can control which variants are generated for the place-content utilities by modifying the placeContent property in the variants section of your tailwind.config.js file.

For example, this config will also generate hover and focus variants:

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     placeContent: ['responsive'],
+     placeContent: ['responsive', 'hover', 'focus'],
  }

Disabling

If you don’t plan to use the place-content utilities in your project, you can disable them entirely by setting the placeContent property to false in the corePlugins section of your config file:

← Align Self