justify-items

그리드 아이템을 인라인 축을 따라 정렬하는 유틸리티입니다.

Class Styles

justify-items-start

justify-items: start;

justify-items-end

justify-items: end;

justify-items-center

justify-items: center;

justify-items-stretch

justify-items: stretch;

justify-items-normal

justify-items: normal;

예제

justify-items-start를 사용하여 그리드 아이템을 인라인 축의 시작점에 정렬할 수 있습니다:

<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>

justify-items-end를 사용하여 그리드 아이템을 인라인 축의 끝으로 정렬할 수 있습니다:

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

그리드 아이템을 인라인 축을 따라 중앙에 정렬하려면 justify-items-center를 사용하세요:

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

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>

접두사 a justify-items 유틸리티 를 md:와 같은 브레이크포인트 변형과 함께 사용하면 medium 화면 크기 이상에서만 유틸리티가 적용됩니다:

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

변형 사용에 대해 더 알아보려면 변형 문서를 참고하세요.