AAtomic CSS

justify-self

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스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: follows parent's justify-items -->
<div class="dg gtcr3-1fr gap16px jic">
  <div class="jsa">Follows parent center</div>
  <div class="jsa">Follows parent center</div>
  <div class="jsa">Follows parent center</div>
</div>

<!-- Reset override in responsive -->
<div class="dg gtcr3-1fr gap16px">
  <div class="jsfe sm-jsa">Desktop right, mobile auto</div>
</div>

jsnjustify-self: normal

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

<!-- normal: same as stretch in grid -->
<div class="dg gtcr3-1fr gap16px">
  <div class="jsn">Behaves like stretch</div>
</div>

jssjustify-self: start

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

<!-- Left-align a specific item -->
<div class="dg gtcr3-1fr gap16px">
  <div>Default (stretch)</div>
  <div class="jss">Left aligned</div>
  <div>Default (stretch)</div>
</div>

jsfejustify-self: flex-end

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

<!-- Right-align a specific item -->
<div class="dg gtcr3-1fr gap16px">
  <div>Default (stretch)</div>
  <div>Default (stretch)</div>
  <div class="jsfe">Right aligned</div>
</div>

<!-- Grid footer area right aligned -->
<div class="dg gtcr2-1fr gap16px">
  <div>Left Content</div>
  <div class="jsfe">
    <button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Action</button>
  </div>
</div>

jscjustify-self: center

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

<!-- Center-align a specific item -->
<div class="dg gtcr3-1fr gap16px">
  <div>Default (stretch)</div>
  <div class="jsc">Center aligned</div>
  <div>Default (stretch)</div>
</div>

jsstjustify-self: stretch

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

<!-- Stretch a specific item when parent is jic -->
<div class="dg gtcr3-1fr gap16px jic">
  <div>Center (follows parent)</div>
  <div class="jsst">Full width (override)</div>
  <div>Center (follows parent)</div>
</div>

justify-self vs justify-items

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

justify-itemsjustify-self
적용 대상Parent (grid container)Child (grid item)
영향 범위All child itemsOnly that item
우선순위Default alignment settingOverrides justify-items
주요 용도Batch alignment for all itemsIndividual alignment for specific item

실전 패턴

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

기본 정렬

기본 정렬

jsfe (우측)

부모 jic + 특정 아이템 stretch

센터

jsst (전체 너비)

센터

반응형

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

<!-- Desktop right, mobile stretch -->
<div class="dg gtcr2-1fr gap16px">
  <div>Content</div>
  <div class="jsfe sm-jsst">Desktop right, stretch below 768px</div>
</div>

<!-- Desktop center, tablet start -->
<div class="dg gtcr3-1fr gap16px">
  <div class="jsc md-jss">Default center, left below 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