如何在CSS Grid中设置最大行数，避免项目不足时出现空行？

原代码中使用grid-template-rows: repeat(4, 2em)会强制生成4行高度，即使列表项不足4个也会保留空行高度。要实现最多4行，超过4项自动新增列的效果，可以通过以下方式修改：

解决方案代码 #

ul {
  display: grid;
  grid-auto-rows: 2em; /* 定义每行固定高度 */
  grid-auto-flow: column; /* 按列方向排列项目 */
  column-gap: 1em;
  max-height: calc(4 * 2em); /* 限制网格最多4行高度 */
  align-content: start; /* 内容从顶部开始排列，避免空行拉伸 */
}

li {
  list-style: none;
}

<hr>
<ul>
  <li>X</li>
  <li>X</li>
</ul>
<hr>
<ul>
  <li>Y</li>
  <li>Y</li>
  <li>Y</li>
  <li>Y</li>
  <li>Y</li>
  <li>Y</li>
  <li>Y</li>
  <li>Y</li>
  <li>Y</li>
  <li>Y</li>
</ul>
<hr>

原理说明 #

1. 替换固定行数为自动行高：用grid-auto-rows: 2em替代grid-template-rows: repeat(4, 2em)，不再强制生成固定4行，而是根据项目数量自动创建所需行数。
2. 限制最大高度：通过max-height: calc(4 * 2em)将网格高度限制为4行的总高度，当项目数量超过4个时，grid-auto-flow: column会自动创建新列来容纳超出的项目，每列最多填充4行。
3. 避免空行拉伸：align-content: start确保内容从网格顶部开始排列，不会让空行占用额外高度，保证列表项不足4个时高度自适应。

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