如何让 CSS 网格的最后一行项目填充剩余空间？

控制 CSS 网格中的最后一行间距

挑战：

我们如何确保最后一行中的所有项目CSS 网格的大小会消耗行中的剩余空间，无论它们如何

解决方案：

利用 CSS 网格的强大功能，我们可以通过 nth-child 和 nth-last-of- 的巧妙组合来实现这种空间控制类型规则。关键在于事先知道网格中的列数。

实现：

1. 使用 display: grid 定义网格并指定所需的列数带有 grid-template-columns 的列。
2. 应用 justify-items: start 属性来对齐中的项目行。
3. 使用 *:nth-child(3n-1) 使用特定属性设置每行中第一个项目的样式（例如，使文本居中）。
4. 使用 *:nth-child (3n) 设置每行中第二个项目的样式（例如，右对齐文本）。
5. 对于每行中的最后一个项目，组合*:nth-child(3n-1) 和 nth-last-of-type(1) 来实现所需的跨越行为。
6. 添加其他规则来自定义最后一行的外观，例如指定边框或背景颜色。

示例代码：

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-items: start;
  grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}

HTML 示例：

<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>

通过利用这些 CSS 属性的力量，我们可以有效地控制项目的间距CSS 网格的最后一行，确保美观且灵活的布局。

以上是如何让 CSS 网格的最后一行项目填充剩余空间？的详细内容。更多信息请关注PHP中文网其他相关文章！