place-items

Definition

The place-items CSS property is a shorthand property that combines the align-items and justify-items properties. It is used in CSS Grid and CSS Flexbox layouts to control the alignment and positioning of the grid or flex items within their container both horizontally and vertically.

The place-items property accepts two values, which represent the alignment and positioning of items along the block and inline axes, respectively. The values can be specified in any order, separated by a space.

Here are some commonly used values:

• start: Aligns items to the start edge of the container.
• end: Aligns items to the end edge of the container.
• center: Centers items along both the block and inline axes.
• stretch: Stretches items to fill the entire container.
• baseline: Aligns items along their baseline.

Here’s an example in a grid container:

.container {
  display: grid;
  place-items: center stretch;
}

In this example, the .container class sets a grid container and uses place-items: center stretch;. This centers the grid items both horizontally and vertically within their cells, and stretches the items to fill the entire cell.

You can mix and match the available values of place-items to achieve the desired alignment and positioning of the grid or flex items within their container. It provides a convenient way to set both the block and inline alignment properties at once, reducing the need for separate align-items and justify-items declarations.

The place-items property is particularly useful when working with CSS Grid and Flexbox layouts, allowing you to easily control the alignment and positioning of items within their container, improving the overall design and layout of your webpage.

Syntax

.layout {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  place-items: center;
}

place-items works across flexbox and grid layouts to position tracks or individual items along the main or cross axis.

Values

• start / end: align content to the logical start or end edge (writing-mode aware).
• center: center items or tracks along the axis.
• stretch: expand items to fill the available space when allowed.
• baseline: line up first baselines for tidy typography.

Practical Examples

.pricing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  place-items: center;
  gap: 2rem;
}

Targeted alignment keeps each call-to-action centered without disturbing sibling cards.

<div class="grid gap-4 sm:grid-cols-2">
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Default alignment</p>
    <div class="grid h-48 gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-3" style="display: grid; grid-auto-rows: minmax(0, 1fr);">
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-900 text-white">A</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">B</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">C</span>
    </div>
  </div>
  <div class="space-y-3 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
    <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">With place-items: center</p>
    <div class="grid h-48 gap-3 rounded-md border border-dashed border-slate-300 bg-slate-50 p-3" style="display: grid; grid-auto-rows: minmax(0, 1fr); place-items: center;">
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-900 text-white">A</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">B</span>
      <span class="flex h-12 w-12 items-center justify-center rounded-full bg-slate-200 text-slate-700">C</span>
    </div>
  </div>
</div>

Tips & Best Practices

• Align on the container first, then reach for *-self overrides only when a child needs unique treatment.
• Prefer logical keywords (start, end) over physical directions for better localisation.
• Combine alignment with gap to manage spacing without extra wrapper elements.

Accessibility & UX Notes

Predictable alignment lowers cognitive load and lets keyboard users tab through content without unexpected jumps. Maintain visible focus indicators and ensure stretched components still provide generous hit areas.

Browser Support

align-* and justify-* properties are well supported. place-* shorthands require Chrome 59+, Edge 79+, Firefox 66+, Safari 12.1+.

Related

• gap for consistent spacing between tracks or items.
• justify-content, align-items, and place-content to coordinate both layout axes.
• flex-direction and grid-auto-flow influence which axis is treated as main vs. cross.