place-items

A shorthand property that sets align-items and justify-items at once. Just two classes dg pic enable perfect centering.

Class List

Class	CSS	Description
`pis`	place-items: start	Place at cell start (top-left)
`pic`	place-items: center	Place at cell center. Simplest centering!
`pie`	place-items: end	Place at cell end (bottom-right)
`pist`	place-items: stretch	Fill entire cell (default)

Visual Comparison

Compares how each place-items value affects grid item positioning. Dotted lines indicate grid cell areas.

Start — pis

Top-left alignment. Items take content size only

Center — pic

Center alignment. Most commonly used pattern!

End — pie

Bottom-right alignment

Stretch (default value) — pist

Fill entire cell. Default behavior even without explicit declaration

Easiest Centering

The dg pic combination is the simplest centering method in CSS. One class fewer than df jcc aic.

Grid method -- dg pic

Center!

Perfect centering with 2 classes

Flex method -- df jcc aic

Center!

Requires 3 classes (same result)

	dg pic	df jcc aic
Number of classes	2 classes (dg pic)	3 classes (df jcc aic)
Layout model	Grid	Flexbox
Multiple child placement	Each placed at the center of its cell	Grouped on one line, centered
Full-screen center	dg pic h100vh	df jcc aic h100vh
Common Use Cases	Single-element centering, alignment within a grid	Horizontal/vertical alignment of multiple elements

When to Use What?

Situation	Recommended	Reason
Full-screen centering	`dg pic h100vh`	The most concise centering (3 classes)
Loading spinner, empty state	`dg pic`	Best for placing a single element dead center
Grid item start alignment	`pis`	Places the item at the top-left of the cell
Grid item end alignment	`pie`	Places the item at the bottom-right of the cell
Revert to default	`pist`	Restore to stretch (switch from pic/pis)

Class Details

`pis`place-items: start

Places all grid items at the start point (top-left) of the cell. Items only take up their content size; remaining space is left empty.

<!-- Place grid items at start -->
<div class="dg gtcr3-1fr pis gap16px h30rem">
  <div class="bg18181B p16px br8px">Top left</div>
  <div class="bg18181B p16px br8px">Top left</div>
  <div class="bg18181B p16px br8px">Top left</div>
</div>

start placement

All items positioned at top-left of the cell

`pic`place-items: center

Places all grid items at the exact center of the cell. The simplest centering method -- just 3 classes dg pic h100vh complete full-screen centering.

<!-- Fullscreen center aligned (most concise!) -->
<div class="dg pic h100vh">
  <div class="tac">
    <h1 class="fs3-6rem fw800 cFAFAFA">404</h1>
    <p class="c71717A mt8px">Page not found</p>
  </div>
</div>

<!-- Loading spinner -->
<div class="dg pic h40rem">
  <div class="w4rem h4rem b4pxsolid27272A bt4pxsolid6366F1 br50p"></div>
</div>

<!-- Card inner centering -->
<div class="dg gtcr3-1fr gap16px">
  <div class="dg pic h20rem bg18181B br8px">
    <span class="fs4-8rem">🎯</span>
  </div>
  <div class="dg pic h20rem bg18181B br8px">
    <span class="fs4-8rem">🚀</span>
  </div>
  <div class="dg pic h20rem bg18181B br8px">
    <span class="fs4-8rem">✨</span>
  </div>
</div>

Common Combinations

`dg pic h100vh`	Full-screen centering (404 page, loading, etc.)
`dg pic h40rem`	Centering within a fixed-height area
`dg pic minh50vh`	Minimum height guarantee + centering
`dg gtcr3-1fr pic`	3-column grid with centering inside each cell

`pie`place-items: end

Places all grid items at the end point (bottom-right) of the cell. Items only take up their content size.

<!-- Place grid items at end -->
<div class="dg gtcr3-1fr pie gap16px h30rem">
  <div class="bg18181B p16px br8px">Bottom right</div>
  <div class="bg18181B p16px br8px">Bottom right</div>
  <div class="bg18181B p16px br8px">Bottom right</div>
</div>

<!-- Place button in footer area -->
<div class="dg pie h20rem bg18181B br8px p2rem">
  <button class="bg6366F1 cFFFFFF py8px px16px br8px bn cp">Confirm</button>
</div>

end placement

All items positioned at bottom-right of the cell

`pist`place-items: stretch

Grid items stretch to fill the entire cell. Since this is the grid default, it rarely needs to be set explicitly, but is used to revert from pis or pic.

<!-- stretch (restore default) -->
<div class="dg gtcr3-1fr pist gap16px h20rem">
  <div class="bg18181B p16px br8px df aic jcc">Fill all</div>
  <div class="bg27272A p16px br8px df aic jcc">Fill all</div>
  <div class="bg18181B p16px br8px df aic jcc">Fill all</div>
</div>

<!-- Responsive: Desktop center → Mobile stretch -->
<div class="dg gtcr3-1fr pic sm-pist gap16px">
  <div class="bg18181B p16px br8px">Responsive alignment</div>
  <div class="bg27272A p16px br8px">Responsive alignment</div>
  <div class="bg18181B p16px br8px">Responsive alignment</div>
</div>

stretch placement (default value)

Items fill the entire cell

Responsive Usage

Combine with media query prefixes to change alignment based on screen size.

<!-- Desktop: center → Mobile: stretch -->
<div class="dg gtcr3-1fr pic sm-pist gap16px">
  <div class="bg18181B p16px br8px">Card</div>
  <div class="bg18181B p16px br8px">Card</div>
  <div class="bg18181B p16px br8px">Card</div>
</div>

<!-- Fullscreen center: start alignment on mobile -->
<div class="dg pic sm-pis h100vh sm-ha p2rem">
  <div class="tac sm-tal">
    <h1>Content</h1>
  </div>
</div>

Class Combination	Behavior
`pic sm-pist`	Default center -> stretch below 768px
`pic sm-pis`	Default center -> start below 768px
`pis md-pic`	Default start -> center below 1024px
`pie sm-pist`	Default end -> stretch below 768px

Tips & Notes

pic: most concise centering

dg pic is the least code centering method in CSS. Use it actively for loading spinners, error pages, empty states, etc.

Grid-only property

place-items must be used with dg (display: grid). For df (display: flex), use jcc aic.

stretch is the default

The default place-items for grid items is stretch. Using pic or pis shrinks items to content size, so add w100p if full width is needed.

align-items justify-content align-self grid-template-columns grid-template-rows display