Skip to content

Tailwind CSS - Place Content

Modern Guide to Tailwind CSS: Place Content

The place-content utilities are shorthands for align-content and justify-content, allowing you to control how the entire set of grid or flex items are packed within their container when there is extra space.

Key Difference: Use place-items to align items within their own cell/space. Use place-content to align the group of items as a whole within the container.

Core `place-content` Utilities

These classes are essential for distributing space in multi-line flex containers (flex-wrap) or in grid layouts where the total size of the grid tracks is less than the grid container.

Class	CSS Properties	Description
`place-content-center`	`place-content: center;`	Packs items in the center of the container.
`place-content-start`	`place-content: start;`	Packs items at the start of the container.
`place-content-end`	`place-content: end;`	Packs items at the end of the container.
`place-content-between`	`place-content: space-between;`	Distributes items evenly; first item at the start, last item at the end.
`place-content-around`	`place-content: space-around;`	Distributes items with equal space around each item.
`place-content-evenly`	`place-content: space-evenly;`	Distributes items with equal space between them and at the ends.
`place-content-stretch`	`place-content: stretch;`	Stretches items to fill the container (for grids).

This example shows how place-content can align a wrapping list of tags. Notice how the alignment changes based on the class applied to the flex container.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
  <title>Tag List with place-content</title>
</head>
<body class="bg-slate-50 p-8">

  <div class="max-w-xl mx-auto">
    <!-- Example 1: place-content-start -->
    <h2 class="text-xl font-semibold text-slate-700 mb-2">`place-content-start`</h2>
    <div class="flex flex-wrap gap-2 p-4 bg-sky-100 rounded-lg h-32 place-content-start mb-8">
      <span class="px-3 py-1 bg-sky-500 text-white rounded-full text-sm">React</span>
      <span class="px-3 py-1 bg-sky-500 text-white rounded-full text-sm">Vue</span>
      <span class="px-3 py-1 bg-sky-500 text-white rounded-full text-sm">Svelte</span>
    </div>

    <!-- Example 2: place-content-center -->
    <h2 class="text-xl font-semibold text-slate-700 mb-2">`place-content-center`</h2>
    <div class="flex flex-wrap gap-2 p-4 bg-amber-100 rounded-lg h-32 place-content-center mb-8">
      <span class="px-3 py-1 bg-amber-500 text-white rounded-full text-sm">JavaScript</span>
      <span class="px-3 py-1 bg-amber-500 text-white rounded-full text-sm">TypeScript</span>
    </div>

    <!-- Example 3: place-content-between -->
    <h2 class="text-xl font-semibold text-slate-700 mb-2">`place-content-between`</h2>
    <div class="grid grid-cols-2 gap-4 p-4 bg-emerald-100 rounded-lg h-48 place-content-between">
        <div class="p-4 bg-emerald-500 rounded-lg text-white">Item 1</div>
        <div class="p-4 bg-emerald-500 rounded-lg text-white">Item 2</div>
        <div class="p-4 bg-emerald-500 rounded-lg text-white">Item 3</div>
        <div class="p-4 bg-emerald-500 rounded-lg text-white">Item 4</div>
    </div>

    <!-- Common Mistake -->
    <div class="mt-12 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md">
      <p class="font-bold">Debugging Tip</p>
      <p>If `place-content` isn't working on a flex container, make sure you have `flex-wrap` enabled and that the container has a defined height (`h-*`) or `min-height` that is larger than its content. The utility only applies when there is extra space to distribute!</p>
    </div>

  </div>

</body>
</html>