使用CSS Grid拆分无序列表为多列 解决grid-template-areas元素重叠问题

结论 #

不需要修改HTML结构，也不需要用到subgrid特性，标准CSS Grid就能实现你的需求。

问题原因 #

你当前代码出现元素堆叠的核心原因是用法错误：grid-area属性用于指定单个元素占用的网格区域，你给所有普通<li>都指定了同一个main-links区域，自然所有元素都会堆叠在这个占满第一行三列的区域中。

正确实现方案 #

不需要定义grid-template-areas，只要给需要单独占满一行的.extra-link设置横跨所有3列即可，剩下的普通链接会自动遵循3列的网格规则排布，修正后的CSS如下：

/* 保留原有的.grid基础样式 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 3rem 0.75rem;
  background-color: #f0f0f0;
  list-style-type: none;
  margin-bottom: 40px;
  padding: 10px;
}

/* 仅需保留这一行样式即可，不需要其他grid--areas相关配置 */
.grid--areas .extra-link {
  /* 1 / -1 表示从网格第一列横跨到最后一列，自动独占一行 */
  grid-column: 1 / -1;
}

实现效果 #

10个普通链接会自动按3列排列：前3行各放3个，第4行放剩下的1个，之后.extra-link单独占满一整行，完全匹配你的需求，该写法兼容所有支持CSS Grid的浏览器。

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