place-content

示例(Examples)

中心(Center)

使用 place-content-center 将项目在内联轴和块轴的中心进行排列：

🌐 Use place-content-center to pack items in the center of the inline and block axes:

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

开始(Start)

使用 place-content-start 将项目沿内联轴和块轴的起始位置对齐:

🌐 Use place-content-start to pack items against the start of the inline and block axes:

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

结尾(End)

使用 place-content-end 将项目沿内联轴和块轴的末端对齐:

🌐 Use place-content-end to pack items against the end of the inline and block axes:

<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 在行内轴和块轴上分配网格项，以便在每个轴上的每一行和每一列之间有相等的间距：

🌐 Use place-content-between to distribute grid items along the inline and block axes so that there is an equal amount of space between each row and column on each axis respectively:

<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 在行内轴和块轴上分配网格项，以便在每个轴上的每一行和每一列周围都有相等的间距：

🌐 Use place-content-around to distribute grid items along the inline and block axes so that there is an equal amount of space around each row and column on each axis respectively:

<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 来分配网格项，使它们在行内轴和块轴上均匀分布：

🌐 Use place-content-evenly to distribute grid items such that they are evenly spaced on the inline and block axes:

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

拉紧(Stretch)

使用 place-content-stretch 将网格项沿行内轴和块轴在其网格区域中拉伸：

🌐 Use place-content-stretch to stretch grid items along their grid areas on the inline and block axes:

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

响应式设计(Responsive design)

在 place-content 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。