| 类名 | 样式 |
|---|---|
| .place-items-start | place-items: start; |
| .place-items-end | place-items: end; |
| .place-items-center | place-items: center; |
| .place-items-stretch | place-items: stretch; |
概览
在 CSS 网格容器上使用 place-items 工具类，作为同时设置 align-items 和 justify-items 的简写。此属性控制网格项目在两个轴上的网格区域内的位置。
基本用法
使用 place-items 工具类来控制网格项的对齐方式。可从 start、end、center 或 stretch（浏览器默认）中选择。
放置
项
开始
放置
项
结束
放置
项
居中
放置
项
拉伸
<div class="d-grid place-items-start">...</div>
<div class="d-grid place-items-end">...</div>
<div class="d-grid place-items-center">...</div>
<div class="d-grid place-items-stretch">...</div>
响应式
place-items也存在响应式变体。
.place-items-start.place-items-end.place-items-center.place-items-stretch.sm:place-items-start.sm:place-items-end.sm:place-items-center.sm:place-items-stretch.md:place-items-start.md:place-items-end.md:place-items-center.md:place-items-stretch.lg:place-items-start.lg:place-items-end.lg:place-items-center.lg:place-items-stretch.xl:place-items-start.xl:place-items-end.xl:place-items-center.xl:place-items-stretch.2xl:place-items-start.2xl:place-items-end.2xl:place-items-center.2xl:place-items-stretch
CSS
Sass 工具 API
地点项目工具在我们的工具 API 中的 scss/_utilities.scss 中声明。了解如何使用工具 API。
"place-items": (
responsive: true,
property: place-items,
values: (
start: start,
end: end,
center: center,
stretch: stretch,
)
),