Tailwind CSS 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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.