AAtomic CSS

place-content

align-content와 justify-content를 한 번에 설정하는 단축 속성입니다. 그리드 컨테이너에서 콘텐츠 전체의 정렬을 제어합니다.

클래스 목록

클래스CSS설명
pcsplace-content: start콘텐츠를 시작 지점에 정렬
pccplace-content: center콘텐츠를 가로 세로 가운데 정렬
pceplace-content: end콘텐츠를 끝 지점에 정렬
pcstplace-content: stretch콘텐츠를 컨테이너 전체로 늘림
pcsbplace-content: space-between첫/끝 요소를 양 끝에, 나머지 균등 배치
pcsaplace-content: space-around각 트랙 주변에 동일한 여백
pcseplace-content: space-evenly모든 간격을 완전히 균등하게 배치

시각적 비교

그리드 컨테이너에 고정 높이를 부여하고 place-content 값에 따른 정렬 차이를 비교합니다.

start — pcs

ABCD

center — pcc

ABCD

end — pce

ABCD

space-between — pcsb

ABCD

space-evenly — pcse

ABCD

사용 예시

<!-- 그리드 콘텐츠 가운데 정렬 -->
<div class="dg gtcr2-1fr pcc h100vh">
  <div>가운데 정렬된 콘텐츠</div>
  <div>가운데 정렬된 콘텐츠</div>
</div>

<!-- space-between으로 상하 분리 -->
<div class="dg pcsb h100vh">
  <header>헤더 (상단)</header>
  <footer>푸터 (하단)</footer>
</div>

팁 & 주의사항

pcc로 완벽한 가운데 정렬

dg pcc는 그리드 콘텐츠를 가로 세로 모두 가운데 정렬하는 가장 간결한 방법입니다.

place-content vs place-items

place-content는 그리드 트랙 전체를, place-items는 각 셀 안의 아이템을 정렬합니다. 컨테이너에 여유 공간이 있을 때 차이가 발생합니다.

place-selfalign-contentjustify-contentgrid