使用CSS Grid能否实现指定排序规则的优质子导航布局？

实现方案 #

完全可以实现，不需要额外嵌套容器，仅修改Grid相关配置即可满足动态li数量的需求。

修改后的完整CSS代码

header {
  background: #00333333; 
  width: 700px; 
}

ul {
  width: 100%; 
  display: grid;
  grid-gap: 10px; 
  /* 核心配置部分 */
  grid-auto-flow: column;
  grid-template-rows: repeat(5, 1fr);
  grid-auto-columns: minmax(300px, 1fr);
}

配置说明

• grid-auto-flow: column：将网格默认的行优先填充逻辑改为列优先，先填满一列再填充下一列
• grid-template-rows: repeat(5, 1fr)：固定每列最多容纳5行，高度自动等分
• grid-auto-columns: minmax(300px, 1fr)：自动生成的新列统一沿用你设定的宽度规则

该配置适配任意数量的动态li元素，元素超过10个时会自动生成第三、第四列，每列始终保持5个元素的排列规则，无需修改HTML结构。

额外提示：你现有HTML里ul的calss属性拼写错误，建议修正为class避免样式不生效。

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