html - 大型菜单中的砖石风格菜单栏

Question

我正在尝试组织megamenu的列，使它们看起来像mansory布局，所以，它不一定是mansory，它只是一个底部列最接近顶部列的菜单，这样做的原因是目前，当链接很少时，列底部相互对齐，在顶部之间留出较大的空间。 我尝试了此处显示的方法:https://w3bits.com/css-masonry/ 但这有他的缺点，当它少于 8 列时，将列分成 6/6，菜单必须有 4 列，然后将其分解到下一行。

html结构是<u>与 <li>里面有链接。

每个 <li>是一列，<ul>是容器

html 结构如下所示:https://jsfiddle.net/leandrorr/1wmdbsn7/11/

我已经尝试过column-count: 4;在 CSS 和子元素中:display: inline-block; width: 100%;

Answer 1

在这里使用砖石并不是一个好的选择。因为每个列表必须在一列中开始和结束(每个列表都有一个第一个元素，它是它的标题)。

另一种选择是，您有 4 列，然后您可以将 2 个列表堆叠在一列中(您必须找到一个好的组合才能使其看起来有序)

示例:

.list-container {
  display: flex;
  
}

.col {
  flex: 1;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 16px;
}
ul li {
  
}
ul li:first-of-type {
  font-weight: bold;
  padding-bottom: 10px;
}

<div class="list-container">
  <div class="col">
    <ul>
      <li>Group 1</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>   
    </ul>
    <ul>
      <li>Group 2</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
  <div class="col">
    <ul>
      <li>Group 3</li>
      <li>Item</li>
      <li>Item</li> 
    </ul>
    <ul>
      <li>Group 4</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>  
    </ul>  
  </div>
  <div class="col">
    <ul>
      <li>Group 5</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>  
    </ul>
    <ul>
      <li>Group 6</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>  
  
  </div>
  <div class="col"></div>
</div>

如果您正在寻找一种自动对它们进行分组的方法，以便它们具有几乎相同的高度，您要么必须手动进行，要么使用 JavaScript 或服务器代码来处理(这仍然需要良好的组合可用)