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

가운데!

Perfect centering with 2 classes

Flex method -- df jcc aic

가운데!

Requires 3 classes (same result)

	dg pic	df jcc aic
Number of classes	2개 (dg pic)	3개 (df jcc aic)
Layout model	Grid	Flexbox
Multiple child placement	각각 셀 중앙에 배치	한 줄에 모여서 중앙
Full-screen center	dg pic h100vh	df jcc aic h100vh
Common Use Cases	단일 요소 센터링, 그리드 내 정렬	여러 요소의 가로/세로 정렬

When to Use What?

Situation	Recommended	Reason
전체 화면 가운데 정렬	`dg pic h100vh`	가장 간결한 센터링 (3 클래스)
로딩 스피너, 빈 상태	`dg pic`	단일 요소 정중앙 배치에 최적
그리드 아이템 시작점 정렬	`pis`	아이템을 셀의 왼쪽 위에 배치
그리드 아이템 끝점 정렬	`pie`	아이템을 셀의 오른쪽 아래에 배치
기본값으로 되돌리기	`pist`	stretch로 복원 (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