根据列表项动态设置CSS网格列数

Question

我有一个动态列表，可以在下拉菜单下显示为网格。我想当项目数超过 15 时将列表拆分为两列，如果项目数小于 15 则只显示一列。我在服务器端使用 freemarker 来获取列表。

<style>
.list {
 display: grid;
grid-template-columns: repeat(2, auto);
grid-auto-rows: 40px;
}
</style>
<#list list as item>
<ul class='list'>
<li>
  <a>${item.title}</a>
</li>

我将网格自动行设置为 40 像素以限制其大小。该列表似乎分为两列，即使项目数量非常少。有什么办法可以让它更有活力吗？

Answer 1

您可以使用 grid-template-rows: repeat 这样做：

.list {
  list-style: none;
  display: grid;
  grid-template-rows: repeat(15, 45px);
  gap: 10px;
  grid-auto-flow: column;
}

.list-item {
  background: black;
  width: 40px;
  height: 40px;
  margin: 10px;
  color: white;
  font-size: 12px;
}

<ul class='list'>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
  <li class="list-item">
    <a>item</a>
  </li>
</ul>

根据列表项动态设置CSS网格列数

Set CSS Grid number of columns dynamically on the basis of list items

html

css

freemarker

css-grid