콘텐츠 배치

콘텐츠 배치 (Place Content)

grid의 인라인 축과 블록 축 모두에서 아이템 그리드 전체를 어떻게 정렬·분배할지 한 번에 정하는 유틸리티예요. CSS의 place-content 속성(=align-content + justify-content)을 조절해요.

출처: 문서

본문

클래스와 스타일

  • place-content-center — place-content: center;
  • place-content-center-safe — place-content: safe center;
  • place-content-start — place-content: start;
  • place-content-end — place-content: end;
  • place-content-end-safe — place-content: safe 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>

Space between

place-content-between을 쓰면 각 축의 행과 열 사이에 동일한 공간이 생기도록 grid 아이템을 분배해요.

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

Space around

place-content-around를 쓰면 각 축의 행과 열 주변에 동일한 공간이 생기도록 grid 아이템을 분배해요.

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

Space evenly

place-content-evenly를 쓰면 grid 아이템들이 인라인 축과 블록 축에서 고르게 간격을 두도록 분배해요.

<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를 쓰면 grid 아이템들이 인라인 축과 블록 축의 그리드 영역을 따라 늘어나요.

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

반응형 디자인

place-content 유틸리티 앞에 md: 같은 브레이크포인트 변형을 붙이면 중간(md) 이상 화면 크기에서만 그 유틸리티가 적용돼요.

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

변형(variant) 사용에 대해 더 알고 싶다면 variants 문서를 참고하세요.

더 알아보기 (Learn more)