css - 在网格模板行 : repeat() 中设置 "max rows"

Question

ul {
  display: grid;
  grid-template-rows: repeat(4, 2em);
  grid-auto-flow: column;
  column-gap: 1em;
}

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>

在此代码中，我有一个包含 grid-template-rows: Repeat(4, 2em); 的列表。

这将填充第一列直到第四行，然后开始第二列。 这很好。

我遇到的问题是，当我的元素少于 4 时，网格仍然是 4 行高。 有没有办法让网格增长到第四行然后开始添加列？

类似于grid-template-rows:repeat(max 4, 2em)。

Answer 1

不是自然的(参见 this Q&A )。

您可以通过定义最大行数并将行高设置为auto并将实际高度定义移动到li。请参阅this CodePen .

ul {
  display: grid;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: 1em;
  row-gap: 0.25em;
  border: 1px solid green;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  height: 1.2em;
  background: lightblue;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<hr>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
</ul>
</hr>