如何在CSS Grid布局中将指定分类移至另一分类下方？

要实现指定分类的垂直堆叠布局，不受其他列元素高度的影响，你需要明确指定每个元素的网格位置，而非依赖Grid的自动流布局。以下是具体实现：

完整代码 #

CSS #

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, auto); /* 定义4行，每行高度自适应 */
  list-style: none;
  gap: 1rem; /* 可选，增加元素间距 */
}

/* 第一行元素定位 */
.grid li:nth-child(1) { grid-area: 1 / 1; }
.grid li:nth-child(2) { grid-area: 1 / 2; }
.grid li:nth-child(3) { grid-area: 1 / 3; }
.grid li:nth-child(4) { grid-area: 1 / 4; }

/* 第二行元素定位 */
.grid li:nth-child(5) { grid-area: 2 / 1; }
.grid li:nth-child(6) { grid-area: 2 / 2; }
.grid li:nth-child(7) { grid-area: 2 / 3; }
.grid li:nth-child(8) { grid-area: 2 / 4; }

/* 第三行元素定位 */
.grid li:nth-child(9) { grid-area: 3 / 1; }
.grid li:nth-child(10) { grid-area: 3 / 2; }
.grid li:nth-child(11) { grid-area: 3 / 3; }
.grid li:nth-child(12) { grid-area: 3 / 4; }

/* 第四行元素定位 */
.grid li:nth-child(13) { grid-area: 4 / 1; }
.grid li:nth-child(14) { grid-area: 4 / 2; }
.grid li:nth-child(15) { grid-area: 4 / 3; }
.grid li:nth-child(16) { grid-area: 4 / 4; }

HTML #

<ul class="grid">
  <li> Category 1 </li>
  <li> Category 2 </li>
  <li> Category 3 </li>
  <li> Category 4 </li>
  <li> Category 5 </li>
  <li> Category 6
    <ul>
      <li> Subcategory 1 </li>
      <li> Subcategory 2 </li>
    </ul>
  </li>
  <li> Category 7
    <ul>
      <li> Subcategory 1 </li>
      <li> Subcategory 2 </li>
      <li> Subcategory 3 </li>
      <li> Subcategory 4 </li>
    </ul>
  </li>
  <li> Category 8 </li>
  <li> Category 9 </li>
  <li> Category 10 </li>
  <li> Category 11 </li>
  <li> Category 12 </li>
  <li> Category 13 </li>
  <li> Category 14 </li>
  <li> Category 15 </li>
  <li> Category 16 </li>
</ul>

关键说明 #

1. 强制网格位置：通过grid-area（或grid-row+grid-column）为每个元素指定确切的行和列位置，确保它们严格按照需求的层级排列，不受其他元素高度干扰。
2. 定义固定行数：grid-template-rows: repeat(4, auto)明确4行布局，每行高度由该行内最高元素决定，但列内元素始终保持垂直顺序。
3. 原方法无效原因：
   • grid-row: 1 / -1会让元素占据所有行，不符合垂直堆叠需求；
   • grid-auto-flow: dense仅用于填充网格空白，无法控制元素的固定层级排列。

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