Các utility để kiểm soát cách content được justify và align cùng một lúc.
| Class | Styles |
|---|---|
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; |
Sử dụng place-content-center để đóng gói các item ở giữa của các trục inline và block:
<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>Sử dụng place-content-start để đóng gói các item về phía bắt đầu của các trục inline và block:
<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>Sử dụng place-content-end để đóng gói các item về phía cuối của các trục inline và block:
<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>Sử dụng place-content-between để phân bố các grid item dọc theo các trục inline và block sao cho có khoảng cách bằng nhau giữa mỗi hàng và cột trên mỗi trục tương ứng:
<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>Sử dụng place-content-around để phân bố các grid item dọc theo các trục inline và block sao cho có khoảng cách bằng nhau xung quanh mỗi hàng và cột trên mỗi trục tương ứng:
<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>Sử dụng place-content-evenly để phân bố các grid item sao cho chúng được phân bố đều trên các trục inline và block:
<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>Sử dụng place-content-stretch để kéo giãn các grid item dọc theo các grid area của chúng trên các trục inline và block:
<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>Prefix a place-content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<div class="grid place-content-start md:place-content-center ..."> <!-- ... --></div>Learn more about using variants in the variants documentation.