如何用纯CSS实现多列表项的移动端3列连续网格布局？

安全阿岳

2026-7-1

问题

需要在移动端导航菜单实现类似计算器/手机主屏幕的3列图标布局，要求：

图标以3列展示，行数随列表项数量自动分配
若某<ol>仅有2个<li>，填满第1、2列后，下一个<ol>的<li>需从空缺的第3列开始
若后续<ol>有多个<li>，则换行填充整行
无法修改HTML结构（不能将所有<li>合并到同一个<ol>）
动态列表项，不想用template areas指定行列位置

现有HTML代码：

<div class="entries">
  <ol>
    <li>1a</li>
    <li>2a</li>
    <li>3a</li>
  </ol>
  <ol>
    <li>4b</li>
    <li>5b</li>
  </ol>
  <ol>
    <li>6c</li>
    <li>7c</li>
  </ol>
  <ol>
    <li>8d</li>
  </ol>
  <ol>
    <li>9e</li>
    <li>10e</li>
  </ol>
</div>

现有Grid CSS代码：

.entries {
  display: grid;
  grid-template-rows: 1fr;
  width: 500px;
}

ol {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px;
  margin: 10px 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
}

解决方案

核心是让所有<li>参与同一个3列网格布局，消除<ol>的独立布局影响，实现连续填充效果。

修改后的CSS代码：

.entries {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 固定3列网格 */
  gap: 20px; /* 控制图标间距 */
  width: 500px;
}

ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents; /* 让ol脱离布局树，li直接成为entries的子元素 */
}

li {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd; /* 可选：添加样式增强视觉效果 */
}