CSS网格布局：行数变化时让第三单元格占满整行的实现方法

当然可行，以下是两种实用的实现方式：

方法一：媒体查询（兼容性好） #

通过媒体查询判断容器宽度，针对不同宽度区间设置网格布局规则，精准控制第三项的显示：

.grid-container {
  margin: 0 auto;
  display: grid;
  gap: 0;
  justify-items: stretch;
  align-items: stretch;
  /* 宽度足够时，三个项平分一行 */
  grid-template-columns: repeat(3, 1fr);
}

/* 当容器宽度小于 840px（3*280px）时，切换为2列布局，第三项占满整行 */
@media (max-width: 839px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-item:nth-child(3) {
    grid-column: 1 / -1; /* 跨越所有列，占满整行 */
  }
}

/* 当容器宽度小于 560px（2*280px）时，切换为单列布局 */
@media (max-width: 559px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

这种方法兼容性强，所有支持CSS网格的浏览器都能正常工作。

方法二：使用:has选择器（无需媒体查询） #

利用CSS的:has选择器判断第三项是否处于单独一行，自动调整布局：

.grid-container {
  margin: 0 auto;
  display: grid;
  gap: 0;
  justify-items: stretch;
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 当第三项是最后一个且单独占一行时，设置为2列布局并让第三项占满整行 */
.grid-container:has(.grid-item:nth-child(3):nth-last-child(1)) {
  grid-template-columns: repeat(2, 1fr);
}
.grid-container:has(.grid-item:nth-child(3):nth-last-child(1)) .grid-item:nth-child(3) {
  grid-column: 1 / -1;
}

注意：:has选择器目前已被现代主流浏览器支持（Chrome、Firefox 121+、Safari等），如果需要兼容旧版浏览器，建议优先使用方法一。

内容的提问来源于stack exchange，提问作者nanmaniac