Tailwind CSS Place Content

The place-content shorthand property helps to control alignment in both CSS Grid and Flexbox layouts. It combines the properties align-content and justify-content, streamlining the process of managing the distribution and alignment of content.

Tailwind CSS simplifies this further by providing a set of utility classes, allowing you to effectively work with place-content without writing custom CSS.

Alignment Utilities

Centrally Align Content

To position your grid or flexbox content at the center of its container, use place-content-center utility.

export default function App() {
  return <h1>Hello world</h1>
}

Align at the Start

To position your grid or flexbox content at the start of its container, use place-content-start utility.

export default function App() {
  return <h1>Hello world</h1>
}

Push Content to the End

To position your grid or flexbox content at the end of its container, use place-content-end utility.

export default function App() {
  return <h1>Hello world</h1>
}

Space Between Items

To add even spacing between items at the container’s edges, use place-content-between utility.

export default function App() {
  return <h1>Hello world</h1>
}

Apply Around Spacing

To distribute items such that the space around each row is equal along the block axis, use place-content-around utility.

export default function App() {
  return <h1>Hello world</h1>
}

Even Distribution of Space

To distribute items such that the space around them is even along the block axis, use place-content-even utility.

export default function App() {
  return <h1>Hello world</h1>
}

Stretch Across Container

To expand and ensure flex/grid items stretch to fit the container boundaries, use place-content-stretch utility.

export default function App() {
  return <h1>Hello world</h1>
}

States and Responsiveness

Hover and Focus States

Tailwind provides you state modifiers like hover, focus, etc. to distribute the flex and grid items only when these states are active. For example, hover:place-content-start will place the items at the start on hover.

export default function App() {
  return <h1>Hello world</h1>
}

Breakpoints Modifiers

Tailwind's breakpoint modifiers allow you to distribute the flex and grid items only when on certain screens(sm, md, etc.) and above. For example, md:place-content-start will place the items at the start on md breakpoint and above.

export default function App() {
  return <h1>Hello world</h1>
}

Real World Examples

Fashion Store Grid

A responsive fashion product grid using place-content-evenly for equal spacing between products in a grid layout.

export default function App() {
  return <h1>Hello world</h1>
}

Recipe Collection

A recipe card collection using place-content-center to create a centered arrangement of recipe cards.

export default function App() {
  return <h1>Hello world</h1>
}

Team Directory

A team member directory using place-content-around for distributed spacing of team member cards.

export default function App() {
  return <h1>Hello world</h1>
}

Game Library

A video game library using place-content-between for maximized spacing between game cards.

export default function App() {
  return <h1>Hello world</h1>
}

Music Playlist

A music playlist interface using place-content-start to align tracks from the top of the container.

export default function App() {
  return <h1>Hello world</h1>
}

Best Practices

Maintain Design Consistency

Aligning content consistently within grid or flex containers ensure a structured layout that users can navigate intuitively. Avoid excessive variations in content placement across similar sections, as inconsistencies can lead to a disjointed interface. Define a standard approach for content alignment and stick to it throughout the project to maintain consistency.

Ensure that the placement of items aligns with the overall design principles and branding guidelines. When working in large teams, document standard placement strategies to ensure uniformity across different components and pages.

Build Responsive Design

Ensuring that place-content-* utilities work effectively across different screen sizes enhances the user experience in responsive designs. By using responsive prefixes (sm:, md:, lg:), you can adjust content placement dynamically to suit various viewports.

In a dashboard layout, place-content-between can evenly distribute widgets or cards on larger screens, creating a well-balanced UI. On smaller screens, switching to place-content-center ensures that important elements remain focused and visually aligned for better usability. This approach maintains a structured layout while adapting seamlessly to different devices.

Since content alignment needs vary across screen sizes, it's important to test how place-content-* behaves at different breakpoints.

Accessibility Considerations

Enhance Readability and Navigability

Proper content placement improves readability and ease of navigation, ensuring that users can quickly scan and comprehend content. When using place-content-*, prioritize alignment that supports natural reading patterns. For languages that read left to right, center or left-aligned content typically enhances readability, while for right-to-left languages, the opposite applies.

Using place-content-start for lists and structured data can improve content discoverability, as users expect content to follow a natural hierarchy. On the other hand, place-content-center works well for small content blocks like call-to-action buttons but may not be ideal for body text in longer paragraphs.

Avoid excessive variation in alignment styles across sections, as sudden shifts in placement can disrupt user focus. Consistent alignment patterns improve readability and help users scan content efficiently, leading to a smoother browsing experience.

Focus on High Contrast

While place-content-* mainly affects content positioning, its role in contrast accessibility is often overlooked. Content alignment can influence perceived contrast, especially when elements overlap or align too closely with other elements.

When placing content, ensure that background elements do not interfere with text readability. For example, placing text over a gradient or patterned background may reduce visibility unless the contrast is sufficiently adjusted. Using bg-opacity-* or backdrop-blur-* utilities alongside place-content-* can help maintain contrast.

Another consideration is spacing around text and interactive elements. Poorly placed content may create cluttered layouts, making it difficult for users with visual impairments to distinguish elements. Ensuring that elements have sufficient separation prevents accessibility issues and enhances usability.