아이템 배치

아이템 배치 (Place Items)

grid 아이템을 각 그리드 영역의 인라인 축과 블록 축 양쪽에서 어떻게 배치할지 한 번에 정하는 유틸리티예요. CSS의 place-items 속성(=align-items + justify-items)을 조절해요.

출처: 문서

본문

클래스와 스타일

  • place-items-start — place-items: start;
  • place-items-end — place-items: end;
  • place-items-end-safe — place-items: safe end;
  • place-items-center — place-items: center;
  • place-items-center-safe — place-items: safe center;
  • place-items-baseline — place-items: baseline;
  • place-items-stretch — place-items: stretch;

시작

place-items-start를 쓰면 grid 아이템을 두 축 모두에서 각 그리드 영역의 시작 부분에 배치해요.

<div class="grid grid-cols-3 place-items-start gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

끝

place-items-end를 쓰면 grid 아이템을 두 축 모두에서 각 그리드 영역의 끝 부분에 배치해요.

<div class="grid h-56 grid-cols-3 place-items-end gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

가운데

place-items-center를 쓰면 grid 아이템을 두 축 모두에서 각 그리드 영역의 중앙에 배치해요.

<div class="grid h-56 grid-cols-3 place-items-center gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

늘리기

place-items-stretch를 쓰면 아이템들을 두 축 모두에서 각 그리드 영역을 따라 늘려요.

<div class="grid h-56 grid-cols-3 place-items-stretch gap-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
  <div>06</div>
</div>

반응형 디자인

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

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

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

더 알아보기 (Learn more)