如何让 CSS Grid 的最后一行项目均匀地填充可用空间？

强制网格最后一行中的项目填充空间

将项目均匀分布在 CSS 网格的最后一行，无论数量多少的项目，请考虑以下方法：

挑战在于确定网格中的项目数量以操纵其布局。由于事先可能不知道这一点，CSS 提供了使用 nth-child 和 nth-last-of-type 选择器的解决方案。它的工作原理如下：

1. 识别最后一行项目：使用 nth-last-of-type 选择最后一行项目。例如，网格> *:nth-last-of-type(1) 将定位最后一行中的所有项目。
2. 分布左端项目：要使最左边的项目居中，请使用 justify-self: center 。对于第二项，使用 justify-self: end 将其向右对齐。这些样式可以应用于每三个项目（例如，grid > *:nth-child(3n-1) 和 grid > *:nth-child(3n-2)）。
3. 调整最后一项跨度：对于行中的最后一项，我们希望它们跨越整个剩余空间。使用 grid-column: span 2 或 grid-column: span 3 来实现此目的，具体取决于网格中的列数（例如，对于三列网格，它将是 grid > *:nth-child(3n -1):nth-last-of-type(1) { grid-column: span 2 }).

通过结合这些技术，您可以确保网格最后一行中的所有项目均匀地消耗可用空间，无论其数量如何。

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