AAtomic CSS

place-self

align-self와 justify-self를 한 번에 설정하는 단축 속성입니다. 개별 그리드 아이템의 셀 내 위치를 제어합니다.

클래스 목록

클래스CSS설명
pssplace-self: start셀의 시작 지점(좌상단)에 배치
pscplace-self: center셀의 정중앙에 배치
pseplace-self: end셀의 끝 지점(우하단)에 배치
psstplace-self: stretch셀 전체를 채움 (기본값)
psaplace-self: auto부모의 place-items 값을 상속

시각적 비교

각 아이템에 서로 다른 place-self 값을 적용하여 셀 내 위치를 비교합니다.

3열 그리드 — 각 아이템별 place-self 적용

psspscpse

start는 좌상단, center는 정중앙, end는 우하단에 배치됩니다

사용 예시

<!-- 특정 아이템만 가운데 정렬 -->
<div class="dg gtcr3-1fr gar10rem gap16px">
  <div>기본 (stretch)</div>
  <div class="psc">가운데 정렬</div>
  <div>기본 (stretch)</div>
</div>

<!-- 아이템별 개별 정렬 -->
<div class="dg gtcr2-1fr gar10rem gap16px">
  <div class="pss">좌상단</div>
  <div class="pse">우하단</div>
  <div class="psc">정중앙</div>
  <div class="psst">전체 채움</div>
</div>

팁 & 주의사항

place-content vs place-self

place-content는 컨테이너에 적용하여 전체 트랙을 정렬하고, place-self는 개별 아이템에 적용하여 자신의 셀 안에서 위치를 결정합니다.

stretch가 기본값

psst(stretch)가 기본값이므로, 명시적으로 설정하지 않으면 아이템은 셀 전체를 채웁니다. 다른 값으로 변경하면 콘텐츠 크기에 맞게 줄어듭니다.

place-contentalign-selfgrid