网格项目对齐

概览

在 CSS Grid 容器上使用 justify-items 工具类来更改网格项目沿内联（行）轴的对齐方式。此属性控制网格项目在其网格区域内的水平定位。

基本用法

使用 justify-items 工具类来控制网格项目的水平对齐方式。可以选择 start、end、center 或 stretch（浏览器默认）。

          <div class="d-grid justify-items-start">...</div>
<div class="d-grid justify-items-end">...</div>
<div class="d-grid justify-items-center">...</div>
<div class="d-grid justify-items-stretch">...</div>
        

响应式

justify-items也存在响应式变体。

• .justify-items-start
• .justify-items-end
• .justify-items-center
• .justify-items-stretch
• .sm:justify-items-start
• .sm:justify-items-end
• .sm:justify-items-center
• .sm:justify-items-stretch
• .md:justify-items-start
• .md:justify-items-end
• .md:justify-items-center
• .md:justify-items-stretch
• .lg:justify-items-start
• .lg:justify-items-end
• .lg:justify-items-center
• .lg:justify-items-stretch
• .xl:justify-items-start
• .xl:justify-items-end
• .xl:justify-items-center
• .xl:justify-items-stretch
• .2xl:justify-items-start
• .2xl:justify-items-end
• .2xl:justify-items-center
• .2xl:justify-items-stretch

CSS

Sass 工具 API

在我们的工具类 API scss/_utilities.scss 中声明了 justify 项目工具类。了解如何使用工具类 API。

"justify-items": (
  responsive: true,
  property: justify-items,
  values: (
    start: start,
    end: end,
    center: center,
    stretch: stretch,
  )
),