CSS Grid布局中的place-items和place-content

Grid 布局的 “Place” 哲学：位置，不止是居中那么简单

话说 CSS Grid 布局，简直是前端界的一把瑞士军刀，各种布局需求都能给你安排得明明白白。但刚上手的时候，那些 “fr”、“grid-template-areas” 之类的属性，确实容易让人头大。好不容易搞明白了，却发现还有 place-items 和 place-content 这两个 “place” 开头的家伙，躲在角落里，笑眯眯地看着你。

别慌，今天咱们就来好好聊聊这对兄弟，保证让你彻底搞懂它们，甚至爱上它们。毕竟，人生嘛，最重要的就是搞清楚自己在哪里，在什么位置，对吧？

先来个形象的比喻：房间和画

想象一下，你有一个宽敞明亮的房间（Grid 容器），房间里可以摆放各种家具和装饰品（Grid 项目）。

• place-items 就像是告诉房间里的每一件单件家具，该如何摆放。比如，告诉沙发要靠墙居中，告诉台灯要放在角落等等。它控制的是 Grid 项目 在其 Grid 单元格 中的对齐方式。

• place-content 就像是告诉整个房间的所有家具，它们作为一个整体，该如何摆放在房间里。比如，告诉所有的家具都集中在房间的中间，或者分散在房间的四周等等。它控制的是 Grid 内容 在 Grid 容器 中的对齐方式。

怎么样，是不是瞬间清晰了不少？

深入剖析：place-items

place-items 是 align-items 和 justify-items 的缩写，它负责控制 Grid 项目在其所在的 Grid 单元格内的对齐方式。简单来说，它决定了你的 “家具” 在 “房间” 的一个格子里的位置。

• align-items: 控制垂直方向的对齐。它有以下几个取值：

  • stretch (默认值)： 拉伸 Grid 项目，使其填满整个 Grid 单元格的高度。
  • start: 将 Grid 项目对齐到 Grid 单元格的顶部。
  • end: 将 Grid 项目对齐到 Grid 单元格的底部。
  • center: 将 Grid 项目在 Grid 单元格中垂直居中。
  • auto: 继承父元素的 align-items 属性，如果没有父元素，则表现为 stretch。

• justify-items: 控制水平方向的对齐。它的取值和 align-items 类似：

  • stretch (默认值)： 拉伸 Grid 项目，使其填满整个 Grid 单元格的宽度。
  • start: 将 Grid 项目对齐到 Grid 单元格的左侧。
  • end: 将 Grid 项目对齐到 Grid 单元格的右侧。
  • center: 将 Grid 项目在 Grid 单元格中水平居中。
  • auto: 继承父元素的 justify-items 属性，如果没有父元素，则表现为 stretch。

所以，当你设置 place-items: center 的时候，就相当于：

place-items: center center; /* 等价于 */
align-items: center;
justify-items: center;

这意味着，所有的 Grid 项目都会在其 Grid 单元格中水平垂直居中。

举个栗子：九宫格的诱惑

咱们来做一个经典的九宫格，并用 place-items 来控制每个格子的内容对齐方式。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  width: 300px;
  height: 300px;
  border: 1px solid black;
  place-items: center; /* 关键就在这里！ */
}

.grid-item {
  border: 1px solid red;
  font-size: 2rem;
}

在这个例子中，place-items: center 让所有的数字都乖乖地待在格子的正中央。如果你想让它们都靠左上角，只需将 place-items 改为 start start 即可。是不是很方便？

进阶用法：只设置一个值

place-items 还有更简洁的写法，那就是只设置一个值。例如：

place-items: start;

这相当于：

align-items: start;
justify-items: start;

也就是说，如果你只提供一个值，那么这个值会被同时应用到 align-items 和 justify-items 上。

再进阶：覆盖单个 Grid 项目的对齐方式

有时候，你可能只想对某个特定的 Grid 项目使用不同的对齐方式。这时候，你可以在该 Grid 项目上单独设置 align-self 和 justify-self 属性。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item special">2</div>
  <div class="grid-item">3</div>
  </div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  width: 300px;
  height: 300px;
  border: 1px solid black;
  place-items: center;
}

.grid-item {
  border: 1px solid red;
  font-size: 2rem;
}

.special {
  align-self: start;
  justify-self: end;
}

在这个例子中，数字 "2" 会被对齐到格子的右上角，而其他的数字仍然保持居中。

接下来，主角登场：place-content

place-content 是 align-content 和 justify-content 的缩写，它控制的是整个 Grid 内容区域在 Grid 容器中的对齐方式。它决定了你的 "所有家具" 在 "整个房间" 的位置。

• align-content: 控制垂直方向的对齐。它有以下几个取值：

  • stretch (默认值)：拉伸 Grid 内容区域，使其填满整个 Grid 容器的高度。注意，只有当 Grid 项目的总高度小于 Grid 容器的高度时，这个属性才会生效。
  • start: 将 Grid 内容区域对齐到 Grid 容器的顶部。
  • end: 将 Grid 内容区域对齐到 Grid 容器的底部。
  • center: 将 Grid 内容区域在 Grid 容器中垂直居中。
  • space-between: 将 Grid 内容区域中的 Grid 行之间均匀分配空间，第一个 Grid 行对齐到 Grid 容器的顶部，最后一个 Grid 行对齐到 Grid 容器的底部。
  • space-around: 将 Grid 内容区域中的 Grid 行周围均匀分配空间，每个 Grid 行的顶部和底部都有相等的空间。
  • space-evenly: 将 Grid 内容区域中的 Grid 行之间和 Grid 内容区域与 Grid 容器之间均匀分配空间。

• justify-content: 控制水平方向的对齐。它的取值和 align-content 类似：

  • stretch (默认值)：拉伸 Grid 内容区域，使其填满整个 Grid 容器的宽度。
  • start: 将 Grid 内容区域对齐到 Grid 容器的左侧。
  • end: 将 Grid 内容区域对齐到 Grid 容器的右侧。
  • center: 将 Grid 内容区域在 Grid 容器中水平居中。
  • space-between: 将 Grid 内容区域中的 Grid 列之间均匀分配空间，第一个 Grid 列对齐到 Grid 容器的左侧，最后一个 Grid 列对齐到 Grid 容器的右侧。
  • space-around: 将 Grid 内容区域中的 Grid 列周围均匀分配空间，每个 Grid 列的左侧和右侧都有相等的空间。
  • space-evenly: 将 Grid 内容区域中的 Grid 列之间和 Grid 内容区域与 Grid 容器之间均匀分配空间。

同样地，当你设置 place-content: center 的时候，就相当于：

place-content: center center; /* 等价于 */
align-content: center;
justify-content: center;

这意味着，整个 Grid 内容区域都会在 Grid 容器中水平垂直居中。

再来个栗子：让九宫格跳跳舞

咱们继续用上面的九宫格例子，这次我们来玩点不一样的，让整个九宫格在容器里跳跳舞。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  width: 500px; /* 容器宽度大于内容宽度 */
  height: 500px; /* 容器高度大于内容高度 */
  border: 1px solid black;
  place-items: center;
  place-content: center; /* 关键就在这里！ */
}

.grid-item {
  border: 1px solid red;
  font-size: 2rem;
}

在这个例子中，我们将容器的宽度和高度都设置得比九宫格内容区域大，然后使用 place-content: center，这样整个九宫格就会乖乖地待在容器的正中央。

如果你想让九宫格分散在容器的四周，可以使用 place-content: space-around。

place-items 和 place-content 的区别：总结与升华

现在，让我们来总结一下 place-items 和 place-content 的区别：

• 作用对象不同: place-items 作用于单个 Grid 项目，控制它们在其 Grid 单元格中的对齐方式；place-content 作用于整个 Grid 内容区域，控制它在 Grid 容器中的对齐方式。

• 应用场景不同: place-items 适用于需要控制每个 Grid 项目在单元格内的具体位置的情况；place-content 适用于需要控制整个 Grid 布局在容器中的整体位置的情况，尤其是在 Grid 内容区域的总大小小于 Grid 容器的大小时。

• 是否生效的条件: place-content 只有在 Grid 内容区域的总大小小于 Grid 容器的大小时才会生效。如果 Grid 内容区域的大小已经填满了 Grid 容器，那么 place-content 就不会有任何效果。

实际应用：不仅仅是居中

虽然我们一直在用居中的例子，但 place-items 和 place-content 的用途远不止于此。它们可以用来实现各种复杂的布局效果，例如：

• 响应式布局: 根据屏幕尺寸的不同，调整 Grid 项目和 Grid 内容区域的对齐方式，从而实现更好的用户体验。
• 卡片式布局: 将卡片内容垂直居中，或者对齐到卡片的顶部或底部。
• 图片展示: 将图片在容器中居中显示，或者根据图片的比例进行裁剪和缩放。
• 信息流布局: 使用 space-between 或 space-around 让信息流中的卡片均匀分布。

最后：灵活运用，创造无限可能

place-items 和 place-content 是 CSS Grid 布局中非常重要的两个属性，它们可以帮助你轻松地控制 Grid 项目和 Grid 内容区域的对齐方式，从而实现各种复杂的布局效果。

记住，理解它们的本质，掌握它们的用法，然后大胆地尝试，你就能创造出无限的可能。就像调酒一样，不同的材料，不同的比例，就能调出不同的味道。

所以，下次再看到 place-items 和 place-content 的时候，不要再害怕了，勇敢地去拥抱它们吧！它们会成为你布局的得力助手，让你的网页更加美观、易用。