place-content

콘텐츠를 동시에 정렬하고 정렬하는 유틸리티입니다.

Class Styles

place-content-center

place-content: center;

place-content-start

place-content: start;

place-content-end

place-content: end;

place-content-between

place-content: space-between;

place-content-around

place-content: space-around;

place-content-evenly

place-content: space-evenly;

place-content-baseline

place-content: baseline;

place-content-stretch

place-content: stretch;

예제

place-content-center를 사용해 블록 축의 중앙에 아이템을 배치할 수 있습니다.

<div class="grid h-48 grid-cols-2 place-content-center gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

place-content-start를 사용하면 블록 축의 시작 부분에 아이템을 정렬할 수 있습니다.

<div class="grid h-48 grid-cols-2 place-content-start gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

place-content-end를 사용하면 아이템들을 블록 축의 끝으로 정렬할 수 있습니다.

<div class="grid h-48 grid-cols-2 place-content-end gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

place-content-between을 사용하면 블록 축을 따라 그리드 아이템을 배치할 때 각 행 사이에 동일한 간격을 만들 수 있습니다:

<div class="grid h-48 grid-cols-2 place-content-between gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

place-content-around를 사용하면 블록 축을 따라 각 행 주위에 동일한 간격을 두고 그리드 아이템을 배치할 수 있습니다:

<div class="grid h-48 grid-cols-2 place-content-around gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

place-content-evenly를 사용하여 그리드 아이템을 블록 축(block axis)을 따라 균등하게 배치할 수 있습니다:

<div class="grid h-48 grid-cols-2 place-content-evenly gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

place-content-stretch를 사용하여 그리드 아이템을 블록 축을 따라 그리드 영역에 맞게 늘릴 수 있습니다:

<div class="grid h-48 grid-cols-2 place-content-stretch gap-4 ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

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

<div class="grid place-content-start md:place-content-center ...">  <!-- ... --></div>

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