如何用CSS实现根据菜单项数量自动切换行列布局的巨型菜单？

我正在制作一款巨型菜单（mega menu）原型，要求菜单项能根据数量“智能”切换显示布局：

• 当菜单项为1-3个时，以横向行排列；
• 当数量超过3个时，固定以3列布局，按从上到下、从左到右的顺序排列（如4个菜单项时，第4个单独占一列，而非排在第3个下方）。

每个菜单项自身还包含子链接。我尝试过CSS columns（使用break-inside: avoid-column）、inline-block布局，也试过flexbox但效果不佳，CSS Grid似乎也无法满足需求。由于菜单项是动态的，数量和子链接数量都不固定，且需要支持响应式（小屏菜单项变为堆叠的手风琴样式），想咨询是否存在优雅的纯CSS实现方案，还是必须依赖JavaScript根据菜单项数量自定义布局？

纯CSS核心布局实现 #

可以通过CSS Grid结合:has()选择器实现智能布局，无需JS就能根据子元素数量自动切换：

核心CSS代码 #

#container {
  width: 900px;
  min-height: 400px;
  display: flex;
  gap: 40px;
  padding: 1em;
  border: 1px solid #ccc;
}
.left {
  width: 25%;
  padding-right: 40px;
  border-right: 1px solid #ccc;
}
.right {
  width: 100%;
  margin-left: auto;
}

.right ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 98%;
  border: 1px solid blue;
  gap: 25px;
  /* 1-3个菜单项时，横向自适应排列 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* 检测到第4个菜单项时，强制3列+列优先排列 */
.right ul:has(li:nth-child(4)) {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, min-content);
}

li {
  border: 1px solid red;
  list-style-type: none;
  margin-bottom: 15px;
}
li:first-child {
  margin-top: 0;
}
li a {
  display: inline-block;
  margin: .125rem 0;
}
h4 {
  margin: 0;
}
[hidden] {
  display: none !important;
}

原理说明 #

1. 默认布局（1-3个菜单项）：repeat(auto-fit, minmax(200px, 1fr))让菜单项自动横向分配宽度，适配容器空间，同时保证每个项的最小宽度。
2. 3列强制布局（>3个菜单项）：:has(li:nth-child(4))精准检测菜单项数量是否超过3，此时切换为3列固定布局，grid-auto-flow: column让元素按列优先排列，直接实现“从上到下、从左到右”的顺序（4个项时，第4项单独占第三列第一行）。
3. Grid布局天然保持每个菜单项的完整性，不需要break-inside属性。

响应式手风琴处理 #

小屏时切换为堆叠手风琴样式，纯CSS即可实现：

补充CSS代码（媒体查询） #

@media (max-width: 768px) {
  #container {
    flex-direction: column;
    width: 100%;
  }
  .left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ccc;
    padding-right: 0;
    margin-bottom: 1em;
  }
  .right ul {
    display: block;
  }

  /* 手风琴交互：hover/focus展开子链接 */
  li h4 {
    cursor: pointer;
    padding: 0.75em;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
  }
  li h4:hover {
    background-color: #f0f0f0;
  }
  .sub-links {
    max-height: 0;
    overflow: hidden;
    padding: 0 0.75em;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  li:hover .sub-links,
  li:focus-within .sub-links {
    max-height: 600px;
    padding: 0.75em;
  }
}

调整HTML结构（给子链接加容器） #

为了实现手风琴的展开/收起，需要给每个菜单项的子链接包裹一个容器：

<li class="1">
    <h4>1 Secondary Content</h4>
    <div class="sub-links">
        <a href="#a1">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
        <a href="#a2">Lorem ipsum dalora itmet vistafa alotma pastruma</a><br>
        <a href="#a3">Lorem ipsum dolora</a><br>
        <a href="#a4">Lorem ipsum dolora</a><br>
        <a href="#a5">Lorem ipsum dolora</a>
    </div>
</li>

兼容性与备选方案 #

• :has()兼容性：现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）均支持该选择器。如果需要兼容旧版浏览器，可以用JS辅助：检测ul下的li数量，超过3时给ul添加three-columns类，再通过类名控制Grid布局。
• JS辅助代码示例：

const updateMenuLayout = () => {
  const ul = document.querySelector('.right ul');
  const liCount = ul.querySelectorAll('li:not([hidden])').length;
  ul.classList.toggle('three-columns', liCount > 3);
};

// 初始化+滑块变化时更新
updateMenuLayout();
document.getElementById('slider').addEventListener('input', updateMenuLayout);

对应的CSS替换：

.right ul.three-columns {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, min-content);
}

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