AAtomic CSS

justify-self

개별 그리드 아이템의 인라인 축(가로 방향) 정렬을 설정합니다. 부모의 justify-items를 오버라이드하여 특정 아이템만 다르게 정렬할 때 사용합니다. 자식 요소에 적용합니다.

클래스 목록

클래스CSS설명
jsajustify-self: auto부모의 justify-items 값을 상속
jsnjustify-self: normal레이아웃 모드 기본값 사용 (그리드: stretch)
jssjustify-self: start아이템을 셀의 시작점에 배치
jsfejustify-self: flex-end아이템을 셀의 끝점에 배치
jscjustify-self: center아이템을 셀의 가운데에 배치
jsstjustify-self: stretch아이템을 셀의 전체 너비로 늘림

시각적 비교

가운데 아이템(B)에만 각 justify-self 값을 적용한 결과입니다. A와 C는 기본값(stretch)입니다.

B에 auto — jsa

A
B
C

부모의 justify-items를 따름 (기본: stretch)

B에 start — jss

A
B
C

B만 셀의 왼쪽에 위치

B에 end — jsfe

A
B
C

B만 셀의 오른쪽에 위치

B에 center — jsc

A
B
C

B만 셀의 가운데에 위치

B에 stretch — jsst

A
B
C

B가 셀의 전체 너비를 차지

클래스별 상세

jsajustify-self: auto

부모의 justify-items 값을 상속받습니다. 기본 동작이므로 명시적으로 지정할 필요가 거의 없지만, 반응형에서 오버라이드를 되돌릴 때 사용합니다.

<!-- auto: 부모의 justify-items를 따름 -->
<div class="dg gtcr3-1fr gap16px jic">
  <div class="jsa">부모 따라 센터</div>
  <div class="jsa">부모 따라 센터</div>
  <div class="jsa">부모 따라 센터</div>
</div>

<!-- 반응형에서 오버라이드 되돌리기 -->
<div class="dg gtcr3-1fr gap16px">
  <div class="jsfe sm-jsa">데스크탑 우측 → 모바일 auto</div>
</div>

jsnjustify-self: normal

레이아웃 모드에 따른 기본값을 사용합니다. 그리드에서는 stretch와 동일하게 작동합니다.

<!-- normal: 그리드에서 stretch와 동일 -->
<div class="dg gtcr3-1fr gap16px">
  <div class="jsn">stretch처럼 동작</div>
</div>

jssjustify-self: start

해당 아이템만 셀의 인라인 축 시작점(왼쪽)에 배치합니다. 다른 아이템의 정렬에는 영향을 주지 않습니다.

<!-- 특정 아이템만 좌측 정렬 -->
<div class="dg gtcr3-1fr gap16px">
  <div>기본 (stretch)</div>
  <div class="jss">좌측 정렬됨</div>
  <div>기본 (stretch)</div>
</div>

jsfejustify-self: flex-end

해당 아이템만 셀의 인라인 축 끝점(오른쪽)에 배치합니다. 그리드 셀 안에서 특정 요소만 우측 정렬할 때 사용합니다.

<!-- 특정 아이템만 우측 정렬 -->
<div class="dg gtcr3-1fr gap16px">
  <div>기본 (stretch)</div>
  <div>기본 (stretch)</div>
  <div class="jsfe">우측 정렬됨</div>
</div>

<!-- 그리드 푸터 영역 우측 정렬 -->
<div class="dg gtcr2-1fr gap16px">
  <div>왼쪽 콘텐츠</div>
  <div class="jsfe">
    <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">액션</button>
  </div>
</div>

jscjustify-self: center

해당 아이템만 셀의 인라인 축 가운데에 배치합니다. 특정 셀의 콘텐츠만 센터 정렬할 때 유용합니다.

<!-- 특정 아이템만 센터 정렬 -->
<div class="dg gtcr3-1fr gap16px">
  <div>기본 (stretch)</div>
  <div class="jsc">센터 정렬됨</div>
  <div>기본 (stretch)</div>
</div>

jsstjustify-self: stretch

해당 아이템을 셀의 전체 너비로 늘립니다. 부모가 jis나 jic일 때 특정 아이템만 전체 너비로 되돌릴 때 사용합니다.

<!-- 부모가 jic일 때 특정 아이템만 stretch -->
<div class="dg gtcr3-1fr gap16px jic">
  <div>센터 (부모 따라)</div>
  <div class="jsst">전체 너비 (오버라이드)</div>
  <div>센터 (부모 따라)</div>
</div>

justify-self vs justify-items

부모에 적용하는 justify-items와 자식에 적용하는 justify-self의 차이를 이해하세요.

justify-itemsjustify-self
적용 대상부모 (그리드 컨테이너)자식 (그리드 아이템)
영향 범위모든 자식 아이템해당 아이템만
우선순위기본 정렬 설정justify-items를 오버라이드
주요 용도전체 아이템 일괄 정렬특정 아이템만 개별 정렬

실전 패턴

그리드에서 특정 아이템만 우측 정렬

기본 정렬

기본 정렬

jsfe (우측)

부모 jic + 특정 아이템 stretch

센터

jsst (전체 너비)

센터

반응형

미디어 쿼리 프리픽스로 화면 크기에 따라 개별 아이템의 정렬을 변경할 수 있습니다.

<!-- 데스크탑 우측 → 모바일 stretch -->
<div class="dg gtcr2-1fr gap16px">
  <div>콘텐츠</div>
  <div class="jsfe sm-jsst">데스크탑 우측 → 768px 이하 stretch</div>
</div>

<!-- 데스크탑 센터 → 태블릿 시작점 -->
<div class="dg gtcr3-1fr gap16px">
  <div class="jsc md-jss">기본 센터 → 1024px 이하 좌측</div>
</div>

팁 & 주의사항

자식 요소에 적용

justify-self는 그리드 컨테이너가 아닌 그리드 아이템(자식)에 적용합니다. 부모에 적용하면 효과가 없습니다.

justify-items의 개별 오버라이드

부모에 jic(justify-items: center)를 설정한 후, 특정 자식만 jsst(justify-self: stretch)로 전체 너비를 차지하게 할 수 있습니다.

Flex에서는 제한적

justify-self는 주로 Grid 레이아웃에서 사용됩니다. Flex 컨테이너에서는 무시되는 경우가 많으므로, flex에서는 mla(margin-left: auto) 등을 대안으로 사용하세요.

justify-itemsalign-selfjustify-contentalign-itemsgrid-template-columnsdisplay