justify-items
그리드 컨테이너에서 모든 아이템을 인라인 축(가로 방향)으로 정렬합니다. 각 셀 안에서 아이템이 어디에 위치할지 결정합니다. 반드시 dg(display: grid)와 함께 사용합니다.
클래스 목록
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
jis | justify-items: start | 아이템을 셀의 인라인 축 시작점에 배치 |
jife | justify-items: flex-end | 아이템을 셀의 인라인 축 끝점에 배치 |
jic | justify-items: center | 아이템을 셀의 인라인 축 가운데에 배치 |
jist | justify-items: stretch | 아이템을 셀의 전체 너비로 늘림 (기본값) |
시각적 비교
각 justify-items 값이 그리드 아이템의 인라인 축 배치에 어떤 영향을 주는지 비교합니다. 점선은 그리드 셀의 전체 영역입니다.
start — jis
각 아이템이 셀의 왼쪽에 위치, 콘텐츠 크기만큼 차지
end — jife
각 아이템이 셀의 오른쪽에 위치
center — jic
각 아이템이 셀의 가운데에 위치
stretch (기본값) — jist
각 아이템이 셀의 전체 너비를 차지
클래스별 상세
jisjustify-items: start
모든 그리드 아이템을 셀의 인라인 축 시작점(왼쪽)에 배치합니다. 아이템은 콘텐츠 크기만큼만 차지합니다.
<!-- Place grid items at cell start -->
<div class="dg gtcr3-1fr gap16px jis">
<div class="bg18181B p16px br4px">Left aligned</div>
<div class="bg18181B p16px br4px">Left aligned</div>
<div class="bg18181B p16px br4px">Left aligned</div>
</div>jifejustify-items: flex-end
모든 그리드 아이템을 셀의 인라인 축 끝점(오른쪽)에 배치합니다.
<!-- Place grid items at cell end -->
<div class="dg gtcr3-1fr gap16px jife">
<div class="bg18181B p16px br4px">Right aligned</div>
<div class="bg18181B p16px br4px">Right aligned</div>
<div class="bg18181B p16px br4px">Right aligned</div>
</div>jicjustify-items: center
모든 그리드 아이템을 셀의 인라인 축 가운데에 배치합니다. 각 셀 안에서 아이템이 가로로 센터 정렬됩니다.
<!-- Place grid items at cell center -->
<div class="dg gtcr3-1fr gap16px jic">
<div class="bg18181B p16px br4px">Center</div>
<div class="bg18181B p16px br4px">Center</div>
<div class="bg18181B p16px br4px">Center</div>
</div>
<!-- Icon grid center alignment -->
<div class="dg gtcr4-1fr gap2rem jic aic">
<div class="tac">Icon 1</div>
<div class="tac">Icon 2</div>
<div class="tac">Icon 3</div>
<div class="tac">Icon 4</div>
</div>jistjustify-items: stretch
모든 그리드 아이템을 셀의 전체 너비로 늘립니다. 그리드의 기본값이므로 명시적으로 지정할 필요가 적지만, 다른 justify-items 값을 되돌릴 때 사용합니다.
<!-- Default (stretch) - explicit -->
<div class="dg gtcr3-1fr gap16px jist">
<div class="bg18181B p16px br4px">Full width</div>
<div class="bg18181B p16px br4px">Full width</div>
<div class="bg18181B p16px br4px">Full width</div>
</div>
<!-- Responsive reset -->
<div class="dg gtcr3-1fr gap16px jic md-jist">
<div class="bg18181B p16px br4px">Default center, tablet stretch</div>
</div>justify-items vs justify-content
두 속성의 차이를 이해하는 것이 중요합니다.
| justify-items | justify-content | |
|---|---|---|
| 대상 | 셀 안의 아이템 위치 | 그리드 트랙(열) 전체 위치 |
| 적용 범위 | 모든 셀의 아이템에 적용 | 그리드 컨테이너 전체에 적용 |
| 기본값 | stretch | start |
| 주요 용도 | 셀 내부 정렬 | 남는 공간에서 열 배치 |
반응형
미디어 쿼리 프리픽스와 조합하여 화면 크기에 따라 그리드 아이템 정렬을 변경할 수 있습니다.
<!-- Desktop center, tablet stretch -->
<div class="dg gtcr3-1fr gap16px jic md-jist">
<div>Default center, stretch below 1024px</div>
</div>
<!-- Desktop start, mobile center -->
<div class="dg gtcr2-1fr gap16px jis sm-jic">
<div>Default left, center below 768px</div>
</div>팁 & 주의사항
Grid 전용 속성
justify-items는 dg(display: grid) 컨테이너에서만 의미가 있습니다. flex 컨테이너에서는 작동하지 않습니다.
개별 아이템 오버라이드
특정 아이템만 다른 정렬을 적용하려면 자식에 justify-self 클래스(jss, jsc 등)를 사용하세요.
stretch가 기본값
그리드의 기본 justify-items는 stretch입니다. jis나 jic를 적용하면 아이템이 콘텐츠 크기로 줄어듭니다.