如何使 CSS 网格中的最后一行跨越整行？

填充 CSS 网格中的最后一行

在 CSS 网格中，一个常见的挑战是确保最后一行中的项目占据整个网格排。如果不知道项目的确切数量，解决方案可能看起来难以捉摸。

使用 nth-child 和 nth-last-of-type

这可以通过组合来实现CSS 规则：nth-​​child 和 nth-last-of-type。这些规则根据元素在特定父元素中的位置来定位元素。通过这些规则，可以调整最后一行中项目的对齐方式和大小。

示例代码：

考虑以下 CSS代码：

.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;
}

解释：

• nth-child(3n-1) 和 nth-child(3n) 基于元素在其中的位置网格容器。这些规则用于设置中间列和右列中的项目的样式。
• nth-child(3n-1):nth-last-of-type(1) 和 nth-child(3n-2):nth -last-of-type(1) 专门针对最后一行中的最后一项，并调整其对齐方式和跨度。
• grid-column 属性用于控制最后一行的列跨度项目，确保它们填满整行。

以上是如何使 CSS 网格中的最后一行跨越整行？的详细内容。更多信息请关注PHP中文网其他相关文章！