AAtomic CSS

justify-items

그리드 컨테이너에서 모든 아이템을 인라인 축(가로 방향)으로 정렬합니다. 각 셀 안에서 아이템이 어디에 위치할지 결정합니다. 반드시 dg(display: grid)와 함께 사용합니다.

클래스 목록

클래스CSS설명
jisjustify-items: start아이템을 셀의 인라인 축 시작점에 배치
jifejustify-items: flex-end아이템을 셀의 인라인 축 끝점에 배치
jicjustify-items: center아이템을 셀의 인라인 축 가운데에 배치
jistjustify-items: stretch아이템을 셀의 전체 너비로 늘림 (기본값)

시각적 비교

각 justify-items 값이 그리드 아이템의 인라인 축 배치에 어떤 영향을 주는지 비교합니다. 점선은 그리드 셀의 전체 영역입니다.

start — jis

A
B
C

각 아이템이 셀의 왼쪽에 위치, 콘텐츠 크기만큼 차지

end — jife

A
B
C

각 아이템이 셀의 오른쪽에 위치

center — jic

A
B
C

각 아이템이 셀의 가운데에 위치

stretch (기본값) — jist

A
B
C

각 아이템이 셀의 전체 너비를 차지

클래스별 상세

jisjustify-items: start

모든 그리드 아이템을 셀의 인라인 축 시작점(왼쪽)에 배치합니다. 아이템은 콘텐츠 크기만큼만 차지합니다.

<!-- 그리드 아이템을 셀 시작점에 배치 -->
<div class="dg gtcr3-1fr gap16px jis">
  <div class="bg18181B p16px br4px">좌측 정렬</div>
  <div class="bg18181B p16px br4px">좌측 정렬</div>
  <div class="bg18181B p16px br4px">좌측 정렬</div>
</div>

jifejustify-items: flex-end

모든 그리드 아이템을 셀의 인라인 축 끝점(오른쪽)에 배치합니다.

<!-- 그리드 아이템을 셀 끝점에 배치 -->
<div class="dg gtcr3-1fr gap16px jife">
  <div class="bg18181B p16px br4px">우측 정렬</div>
  <div class="bg18181B p16px br4px">우측 정렬</div>
  <div class="bg18181B p16px br4px">우측 정렬</div>
</div>

jicjustify-items: center

모든 그리드 아이템을 셀의 인라인 축 가운데에 배치합니다. 각 셀 안에서 아이템이 가로로 센터 정렬됩니다.

<!-- 그리드 아이템을 셀 가운데에 배치 -->
<div class="dg gtcr3-1fr gap16px jic">
  <div class="bg18181B p16px br4px">가운데</div>
  <div class="bg18181B p16px br4px">가운데</div>
  <div class="bg18181B p16px br4px">가운데</div>
</div>

<!-- 아이콘 그리드 센터 정렬 -->
<div class="dg gtcr4-1fr gap2rem jic aic">
  <div class="tac">아이콘 1</div>
  <div class="tac">아이콘 2</div>
  <div class="tac">아이콘 3</div>
  <div class="tac">아이콘 4</div>
</div>

jistjustify-items: stretch

모든 그리드 아이템을 셀의 전체 너비로 늘립니다. 그리드의 기본값이므로 명시적으로 지정할 필요가 적지만, 다른 justify-items 값을 되돌릴 때 사용합니다.

<!-- 기본값 (stretch) - 명시적 지정 -->
<div class="dg gtcr3-1fr gap16px jist">
  <div class="bg18181B p16px br4px">전체 너비</div>
  <div class="bg18181B p16px br4px">전체 너비</div>
  <div class="bg18181B p16px br4px">전체 너비</div>
</div>

<!-- 반응형에서 되돌리기 -->
<div class="dg gtcr3-1fr gap16px jic md-jist">
  <div class="bg18181B p16px br4px">기본 센터 → 태블릿 stretch</div>
</div>

justify-items vs justify-content

두 속성의 차이를 이해하는 것이 중요합니다.

justify-itemsjustify-content
대상셀 안의 아이템 위치그리드 트랙(열) 전체 위치
적용 범위모든 셀의 아이템에 적용그리드 컨테이너 전체에 적용
기본값stretchstart
주요 용도셀 내부 정렬남는 공간에서 열 배치

반응형

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

<!-- 데스크탑 센터 → 태블릿 stretch -->
<div class="dg gtcr3-1fr gap16px jic md-jist">
  <div>기본 센터 → 1024px 이하 stretch</div>
</div>

<!-- 데스크탑 start → 모바일 센터 -->
<div class="dg gtcr2-1fr gap16px jis sm-jic">
  <div>기본 좌측 → 768px 이하 센터</div>
</div>

팁 & 주의사항

Grid 전용 속성

justify-items는 dg(display: grid) 컨테이너에서만 의미가 있습니다. flex 컨테이너에서는 작동하지 않습니다.

개별 아이템 오버라이드

특정 아이템만 다른 정렬을 적용하려면 자식에 justify-self 클래스(jss, jsc 등)를 사용하세요.

stretch가 기본값

그리드의 기본 justify-items는 stretch입니다. jis나 jic를 적용하면 아이템이 콘텐츠 크기로 줄어듭니다.

justify-selfjustify-contentalign-itemsalign-contentgrid-template-columnsdisplay