place-items

align-items와 justify-items를 한 번에 설정하는 단축 속성입니다. dg pic 두 클래스만으로 완벽한 가운데 정렬이 가능합니다.

클래스 목록

클래스	CSS	설명
`pis`	place-items: start	셀의 시작점(왼쪽 위)에 배치
`pic`	place-items: center	셀의 정중앙에 배치. 가장 간단한 센터링!
`pie`	place-items: end	셀의 끝점(오른쪽 아래)에 배치
`pist`	place-items: stretch	셀 전체를 채움 (기본값)

시각적 비교

각 place-items 값이 그리드 아이템의 위치에 미치는 영향을 비교합니다. 점선은 그리드 셀 영역입니다.

Start — pis

왼쪽 위 정렬. 아이템은 내용 크기만큼만 차지

Center — pic

정중앙 정렬. 가장 많이 사용되는 패턴!

End — pie

오른쪽 아래 정렬

Stretch (기본값) — pist

셀 전체를 채움. 명시하지 않아도 기본 동작

가장 쉬운 가운데 정렬

dg pic 조합은 CSS에서 가장 간단한 가운데 정렬 방법입니다. df jcc aic보다 클래스 하나가 적습니다.

Grid 방식 — dg pic

가운데!

클래스 2개로 완벽한 가운데 정렬

Flex 방식 — df jcc aic

가운데!

클래스 3개 필요 (동일 결과)

	dg pic	df jcc aic
클래스 수	2개 (dg pic)	3개 (df jcc aic)
레이아웃 모델	Grid	Flexbox
여러 자식 배치	각각 셀 중앙에 배치	한 줄에 모여서 중앙
전체 화면 센터	dg pic h100vh	df jcc aic h100vh
주요 용도	단일 요소 센터링, 그리드 내 정렬	여러 요소의 가로/세로 정렬

언제 뭘 쓸까?

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

클래스별 상세

`pis`place-items: start

모든 그리드 아이템을 셀의 시작점(왼쪽 위)에 배치합니다. 아이템은 내용 크기만큼만 차지하며 나머지 공간은 비워둡니다.

<!-- 그리드 아이템을 시작점에 배치 -->
<div class="dg gtcr3-1fr pis gap16px h30rem">
  <div class="bg18181B p16px br8px">왼쪽 위</div>
  <div class="bg18181B p16px br8px">왼쪽 위</div>
  <div class="bg18181B p16px br8px">왼쪽 위</div>
</div>

start 배치

모든 아이템이 셀의 왼쪽 위에 위치

`pic`place-items: center

모든 그리드 아이템을 셀의 정중앙에 배치합니다. 가장 간단한 가운데 정렬 방법이며, dg pic h100vh 3개 클래스만으로 전체 화면 가운데 정렬이 완성됩니다.

<!-- 전체 화면 가운데 정렬 (가장 간결!) -->
<div class="dg pic h100vh">
  <div class="tac">
    <h1 class="fs3-6rem fw800 cFAFAFA">404</h1>
    <p class="c71717A mt8px">페이지를 찾을 수 없습니다</p>
  </div>
</div>

<!-- 로딩 스피너 -->
<div class="dg pic h40rem">
  <div class="w4rem h4rem b4pxsolid27272A bt4pxsolid6366F1 br50p"></div>
</div>

<!-- 카드 내부 센터링 -->
<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>

자주 쓰는 조합

`dg pic h100vh`	전체 화면 가운데 정렬 (404 페이지, 로딩 등)
`dg pic h40rem`	고정 높이 영역 내 가운데 정렬
`dg pic minh50vh`	최소 높이 보장 + 가운데 정렬
`dg gtcr3-1fr pic`	3열 그리드에서 각 셀 내부 센터링

`pie`place-items: end

모든 그리드 아이템을 셀의 끝점(오른쪽 아래)에 배치합니다. 아이템은 내용 크기만큼만 차지합니다.

<!-- 그리드 아이템을 끝점에 배치 -->
<div class="dg gtcr3-1fr pie gap16px h30rem">
  <div class="bg18181B p16px br8px">오른쪽 아래</div>
  <div class="bg18181B p16px br8px">오른쪽 아래</div>
  <div class="bg18181B p16px br8px">오른쪽 아래</div>
</div>

<!-- 푸터 영역에 버튼 배치 -->
<div class="dg pie h20rem bg18181B br8px p2rem">
  <button class="bg6366F1 cFFFFFF py8px px16px br8px bn cp">확인</button>
</div>

end 배치

모든 아이템이 셀의 오른쪽 아래에 위치

`pist`place-items: stretch

그리드 아이템이 셀 전체를 채우도록 늘어납니다. 그리드의 기본값이므로 명시적으로 쓸 일은 드물지만, pis나 pic에서 되돌릴 때 사용합니다.

<!-- stretch (기본값 복원) -->
<div class="dg gtcr3-1fr pist gap16px h20rem">
  <div class="bg18181B p16px br8px df aic jcc">전체 채움</div>
  <div class="bg27272A p16px br8px df aic jcc">전체 채움</div>
  <div class="bg18181B p16px br8px df aic jcc">전체 채움</div>
</div>

<!-- 반응형: 데스크탑 center → 모바일 stretch -->
<div class="dg gtcr3-1fr pic sm-pist gap16px">
  <div class="bg18181B p16px br8px">반응형 정렬</div>
  <div class="bg27272A p16px br8px">반응형 정렬</div>
  <div class="bg18181B p16px br8px">반응형 정렬</div>
</div>

stretch 배치 (기본값)

아이템이 셀 전체를 채움

반응형 사용

미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 정렬 방식을 변경할 수 있습니다.

<!-- 데스크탑: center → 모바일: stretch -->
<div class="dg gtcr3-1fr pic sm-pist gap16px">
  <div class="bg18181B p16px br8px">카드</div>
  <div class="bg18181B p16px br8px">카드</div>
  <div class="bg18181B p16px br8px">카드</div>
</div>

<!-- 전체 화면 센터: 모바일에서 시작점 정렬 -->
<div class="dg pic sm-pis h100vh sm-ha p2rem">
  <div class="tac sm-tal">
    <h1>콘텐츠</h1>
  </div>
</div>

클래스 조합	동작
`pic sm-pist`	기본 가운데 → 768px 이하에서 전체 채움
`pic sm-pis`	기본 가운데 → 768px 이하에서 시작점
`pis md-pic`	기본 시작점 → 1024px 이하에서 가운데
`pie sm-pist`	기본 끝점 → 768px 이하에서 전체 채움

팁 & 주의사항

pic: 가장 간결한 센터링

dg pic는 CSS에서 가장 적은 코드로 가운데 정렬하는 방법입니다. 로딩 스피너, 에러 페이지, 빈 상태 등에 적극 활용하세요.

Grid 전용 속성

place-items는 dg(display: grid)와 함께 사용해야 합니다. df(display: flex)에서는 jcc aic를 사용하세요.

stretch가 기본값

그리드 아이템의 기본 place-items는 stretch입니다. pic이나 pis를 사용하면 아이템이 내용 크기로 줄어들므로, 전체 너비가 필요하면 w100p를 추가하세요.

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