Css 在GRIDTEMPLATEROWS中设置最大行数：Repeat()

发布于11月08日

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)个左右.

推荐答案

不是自然而然的(见this Q&A).

不过，您可以通过定义最大行数并将行的高度设置为auto并将actual的高度定义移动到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>