Justify Items

Justify Items

grid 항목들을 인라인 축(inline axis) 기준으로 어떻게 정렬할지 컨테이너 레벨에서 정해주는 유틸리티예요. 그리드 안의 모든 항목에 일괄 적용돼요.

출처: 문서

본문

ClassStyles

예시 (Examples)

시작 (Start)

justify-items-start 유틸리티를 사용하면 grid 항목들을 인라인 축의 시작 부분에 맞춰 정렬해요.

<div class="grid justify-items-start ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

끝 (End)

justify-items-end 또는 justify-items-end-safe 유틸리티를 사용하면 grid 항목들을 인라인 축의 끝 부분에 맞춰 정렬해요.

<div class="grid grid-flow-col justify-items-end ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="grid grid-flow-col justify-items-end-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

공간이 충분하지 않을 때 justify-items-end-safe 유틸리티는 끝 대신 컨테이너의 시작 부분에 항목들을 정렬해요.

중앙 (Center)

justify-items-center 또는 justify-items-center-safe 유틸리티를 사용하면 grid 항목들을 인라인 축의 중앙에 맞춰 정렬해요.

<div class="grid grid-flow-col justify-items-center ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="grid grid-flow-col justify-items-center-safe ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

공간이 충분하지 않을 때 justify-items-center-safe 유틸리티는 중앙 대신 컨테이너의 시작 부분에 항목들을 정렬해요.

늘이기 (Stretch)

justify-items-stretch 유틸리티를 사용하면 항목들을 인라인 축을 따라 늘려요.

<div class="grid justify-items-stretch ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

반응형 디자인 (Responsive design)

justify-items 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기 화면 이상에서만 유틸리티가 적용되게 만들 수 있어요.

<div class="grid justify-items-start md:justify-items-center ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알아보려면 variants 문서를 확인해 보세요.

더 알아보기 (Learn more)