Tailwind Place Content

The place-content utility class in Tailwind CSS allows you to control the alignment and spacing of grid or flex container content both horizontally and vertically. With Tailwind's place-content class, you can easily position and distribute your content within a container.

Applying Place Content

To apply the alignment and spacing to a grid or flex container, you can use the place-content-{alignment} utility class, where {alignment} represents the desired alignment. Here are the available alignment options:

• place-content-start: Aligns content to the start of both the horizontal and vertical axes.
• place-content-end: Aligns content to the end of both the horizontal and vertical axes.
• place-content-center: Aligns content to the center of both the horizontal and vertical axes.
• place-content-between: Distributes content evenly along the horizontal axis, with the first item aligned to the start and the last item aligned to the end.
• place-content-around: Distributes content evenly along the horizontal axis, with equal spacing around each item.
• place-content-evenly: Distributes content evenly along the horizontal axis, with equal spacing between each item.
• place-content-stretch: Stretches content to fill the container along both axes.

<div class="grid place-content-end">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Preview

Responsive Place Content

Tailwind CSS allows you to apply place content classes responsively at different breakpoints. To use responsive place content classes, you can append the breakpoint prefix to the utility class. For example, md:place-content-between distributes the content evenly along the horizontal axis starting from the medium breakpoint and above.

<div class="grid place-content-start md:place-content-between">
  <!-- Grid items here -->
</div>

In the above example, the content is aligned to the start of both axes by default (place-content-start), but starting from the medium breakpoint and above, the content is distributed evenly along the horizontal axis (md:place-content-between).

Tailwind Place-content Class Table

Windframe Tailwind blocks

footer