CSS 零基础教程

CSS Grid 整体对齐

justify-content、align-content 和 place-content 是强大的 CSS Grid 属性，用于精确控制整个网格在容器内的位置。

这种情况通常发生在网格项目（items）的总大小小于网格容器（container）的大小时，或者由于固定尺寸的网格轨道导致有多余空间时。这些属性分别处理沿行轴（水平）和块轴（垂直）的空间分布。

基于上一章关于 justify-items（单元格内对齐）的知识，本章节将探讨如何使用 justify-content 等属性来管理网格项目周围的空间分布，而不是项目内部。

1. 理解 justify-content

justify-content 属性定义了当网格项目的总宽度小于网格容器宽度时，网格项目如何沿行轴（通常是水平方向）对齐。

换句话说，它控制的是当水平方向有多余空间时，如何分配这些空间。

1.1 justify-content 的可选值

justify-content 接受多个值，每个值对间距和对齐的影响都不同：

  • start: 网格项目紧贴网格容器的起始边缘（左侧）。
  • end: 网格项目紧贴网格容器的结束边缘（右侧）。
  • center: 网格项目在网格容器内水平居中。
  • stretch: 调整网格项目的大小以填充网格容器。注意： 要使其工作，项目的大小必须为 auto。如果项目有特定大小，它将遵循该大小。
  • space-around: 项目均匀分布，每个项目周围都有相等的空间。第一个项目之前和最后一个项目之后的空间大小是两个项目之间空间的一半。
  • space-between: 项目在网格容器内均匀分布。第一个项目紧贴起始边缘，最后一个项目紧贴结束边缘，剩余空间在项目之间均匀分配。
  • space-evenly: 项目在网格容器内均匀分布，每个项目周围（包括第一个项目之前和最后一个项目之后）的空间完全相等。

1.2 justify-content 示例

让我们考虑一个包含三个网格项目的容器，每个项目都有固定的宽度。我们将应用不同的 justify-content 值来看看它们如何影响布局。

HTML:

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

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px); /* 固定列宽 */
  grid-template-rows: 100px; /* 固定行高 */
  width: 600px; /* 容器宽度 */
  height: 200px; /* 容器高度 */
  border: 2px solid black;
}
.item {
  width: 100px; /* 固定项目宽度 */
  height: 100px;
  background-color: lightblue;
  border: 1px solid blue;
  text-align: center;
  font-size: 20px;
}

1. justify-content: start;

.container {
  justify-content: start;
}

网格项目将对齐到容器的左边缘。

2. justify-content: end;

.container {
  justify-content: end;
}

网格项目将对齐到容器的右边缘。

3. justify-content: center;

.container {
  justify-content: center;
}

网格项目将在容器内水平居中。

4. justify-content: space-around;

.container {
  justify-content: space-around;
}

每个项目周围将放置相等的空间（项目之间的间距看起来比两端的大）。

5. justify-content: space-between;

.container {
  justify-content: space-between;
}

第一个项目紧贴左侧，最后一个紧贴右侧，剩余空间在项目之间均匀分布。

6. justify-content: space-evenly;

.container {
  justify-content: space-evenly;
}

每个项目之间（包括容器两端）的空间完全相等。

7. justify-content: stretch;

.container { justify-content: stretch; }
.item {
    width: auto; /* 将宽度改为 auto */
}

只有当项目的 width 设置为 auto 时，网格项目才会拉伸以填充容器中的可用空间。

2. 理解 align-content

align-content 属性类似于 justify-content，但它作用于块轴（通常是垂直方向）。

它定义了当网格轨道的总高度小于网格容器高度时，网格轨道如何在容器内对齐。这通常发生在你拥有固定高度的网格轨道且容器有多余垂直空间时。

2.1 align-content 的可选值

align-content 接受与 justify-content 相同的值：

  • start: 网格轨道紧贴网格容器的顶部。
  • end: 网格轨道紧贴网格容器的底部。
  • center: 网格轨道在网格容器内垂直居中。
  • stretch: 拉伸网格轨道以填充网格容器。注意： 项目大小必须为 auto。
  • space-around: 网格轨道均匀分布，每行周围有相等的空间。
  • space-between: 网格轨道均匀分布。第一行紧贴顶部，最后一行紧贴底部，剩余空间在行之间均匀分配。
  • space-evenly: 网格轨道均匀分布，每行之间（包括顶部和底部）的空间完全相等。

2.2 align-content 示例

让我们考虑一个包含两行网格项目的容器，每行都有固定的高度。

HTML:

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

CSS: 

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px); /* 固定行高 */
  width: 600px;
  height: 200px; /* 容器高度 */
  border: 2px solid black;
}
.item {
  width: 100px;
  height: 50px; /* 固定项目高度 */
  background-color: lightblue;
  border: 1px solid blue;
  text-align: center;
  font-size: 20px;
}

1. align-content: start;

.container {
  align-content: start;
}

网格轨道将对齐到容器的顶部边缘。

2. align-content: end;

.container {
  align-content: end;
}

网格轨道将对齐到容器的底部边缘。

3. align-content: center;

.container {
  align-content: center;
}

网格轨道将在容器内垂直居中。

4. align-content: space-around;

.container {
  align-content: space-around;
}

每行轨道周围将放置相等的空间。

5. align-content: space-between;

.container {
  align-content: space-between;
}

第一行紧贴顶部，最后一行紧贴底部，剩余空间在行之间分布。

6. align-content: space-evenly;

.container {
  align-content: space-evenly;
}

每行之间（包括容器顶部和底部）的空间完全相等。

7. align-content: stretch;

.container { align-content: stretch; }
.item {
    height: auto; /* 将高度改为 auto */
}

只有当项目的 height 设置为 auto 时，网格项目才会拉伸以填充容器中的可用垂直空间。

3. 理解 place-content

place-content 属性是一个简写属性，用于在一个声明中同时设置 align-content 和 justify-content。它简化了 CSS 代码，使其更具可读性。

3.1 place-content 的值

place-content 接受一个或两个值：

  • 一个值: 如果只提供一个值，它将同时应用于 align-content 和 justify-content。
  • 两个值: 如果提供两个值，第一个值设置 align-content（垂直），第二个值设置 justify-content（水平）。

3.2 place-content 示例

让我们回顾之前的例子并使用 place-content 来实现相同的布局。

HTML:

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

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 50px);
  width: 600px;
  height: 200px;
  border: 2px solid black;
}
.item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  border: 1px solid blue;
  text-align: center;
  font-size: 20px;
}

1. place-content: center;

.container {
  place-content: center; /* 等同于 align-content: center; justify-content: center; */
}

网格轨道将在容器内同时水平和垂直居中。

2. place-content: space-between start;

.container {
  place-content: space-between start; /* align-content: space-between; justify-content: start; */
}

网格轨道将在垂直方向上使用 space-between 对齐，在水平方向上对齐到 start。

3. place-content: end space-around;

.container {
  place-content: end space-around; /* align-content: end; justify-content: space-around; */
}

网格轨道将在垂直方向上对齐到 end，在水平方向上使用 space-around 对齐。

4. 实战案例

让我们看一个实际例子，使用 justify-content、align-content 和 place-content 来创建一个响应式卡片布局。

HTML:

<div class="card-container">
  <div class="card">
    <h3>卡片 1</h3>
    <p>这是第一张卡片。</p>
  </div>
  <div class="card">
    <h3>卡片 2</h3>
    <p>这是第二张卡片。</p>
  </div>
  <div class="card">
    <h3>卡片 3</h3>
    <p>这是第三张卡片。</p>
  </div>
</div>

CSS:

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  height: 600px;
  border: 2px solid black;
  place-content: center; /* 将卡片在水平和垂直方向上都居中 */
}
.card {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
}
.card h3 {
  margin-top: 0;
}

在这个例子中，place-content: center; 确保了无论卡片数量多少或容器大小如何，卡片始终在 card-container 内水平和垂直居中。