justify-items

Ví dụ

Start

Sử dụng utility justify-items-start để căn chỉnh các grid item về phía bắt đầu của trục inline của chúng:

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

End

Sử dụng các utility justify-items-end hoặc justify-items-end-safe để căn chỉnh các grid item về phía cuối của trục inline của chúng:

<div class="grid grid-flow-col justify-items-end ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

<div class="grid grid-flow-col justify-items-end-safe ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Khi không có đủ không gian, utility justify-items-end-safe sẽ căn chỉnh các item về phía bắt đầu của container thay vì phía cuối.

Center

Sử dụng các utility justify-items-center hoặc justify-items-center-safe để căn chỉnh các grid item về phía cuối của trục inline của chúng:

<div class="grid grid-flow-col justify-items-center ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

<div class="grid grid-flow-col justify-items-center-safe ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Khi không có đủ không gian, utility justify-items-center-safe sẽ căn chỉnh các item về phía bắt đầu của container thay vì giữa.

Stretch

Sử dụng utility justify-items-stretch để kéo giãn các item dọc theo trục inline của chúng:

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

Thiết kế phản hồi

Prefix a justify-items utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.