CSS Grid 和 place-items 在一起

简介

CSS Grid Layout 是一个强大的 CSS 属性，用于创建二维网格布局。place-items 属性是 CSS Grid 中的一个子属性，用于设置项目在网格容器中如何放置。

将 grid-template-areas 和 place-items 结合使用可以轻松地创建灵活性高、布局简洁的响应式网格系统。

实例

下面是一个简单的示例，演示如何使用 place-items 将项目居中对齐，使用 grid-template-areas 定义网格布局。

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  grid-template-areas:
    ". . . ."
    ". . . ."
    ". . . .";
  place-items: center;
}

.grid-item {
  background-color: #eee;
  padding: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item" style="grid-area: 1 / 1 / 2 / 2">Item 1</div>
  <div class="grid-item" style="grid-area: 1 / 2 / 2 / 3">Item 2</div>
  <div class="grid-item" style="grid-area: 1 / 3 / 2 / 4">Item 3</div>
  <div class="grid-item" style="grid-area: 2 / 1 / 3 / 2">Item 4</div>
  <div class="grid-item" style="grid-area: 2 / 2 / 3 / 4">Item 5</div>
  <div class="grid-item" style="grid-area: 3 / 1 / 4 / 5">Item 6</div>
</div>

在这个示例中，我们创建了一个具有四列、三行的网格容器。我们将每个项目放置在网格中并使用 grid-area 设置其位置。然后，我们使用 place-items 属性将项目居中对齐。

属性详解

place-items

place-items 属性是一个简写属性，用于设置元素在网格容器中的对齐方式，包括水平对齐和垂直对齐。

该属性可以接受两个值：

• auto: 网格项目沿网格区域的起点布置，与 start 对齐。
• <align-items> <justify-items>: <align-items> 设置网格项目在垂直方向上的对齐方式，<justify-items> 设置网格项目在水平方向上的对齐方式。

align-items

align-items 属性用于设置网格项目在垂直方向上的对齐方式，可以使用以下值：

• start: 项目顶部与网格线对齐。
• end: 项目底部与网格线对齐。
• center: 项目垂直居中对齐。
• stretch: 项目高度将拉伸以填充网格区域的高度。

justify-items

justify-items 属性用于设置网格项目在水平方向上的对齐方式，可以使用以下值：

• start: 项目左侧与网格线对齐。
• end: 项目右侧与网格线对齐。
• center: 项目水平居中对齐。
• stretch: 项目宽度将拉伸以填充网格区域的宽度。

总结

CSS Grid 和 place-items 属性让我们可以轻松地创建灵活性高、布局简洁的响应式网格系统。我们可以使用 grid-template-areas 定义网格布局，使用 place-items 属性设置项目在网格容器中如何放置。详细了解和掌握 CSS Grid 和 place-items 属性对于 Web 开发人员来说是非常重要的。