CSS Grid列重排问题：移动端布局重叠如何修复？

为啥会重叠？ #

移动端代码里所有<li>的<p>都共用了相同的grid-area名称（a/b/c/d），浏览器会把所有对应名称的元素塞进同一个网格区域，自然就重叠了。再加上原来的subgrid逻辑在移动端不匹配，行分配彻底乱了套。

修改后的CSS代码 #

ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: span 4;
}

li p:nth-of-type(1) { grid-column: 1; }
li p:nth-of-type(2) { grid-column: 2; }
li p:nth-of-type(3) { grid-column: 3; }
li p:nth-of-type(4) { grid-column: 4; }

@media (max-width: 650px) {
  ul {
    /* 移动端ul改为单列布局，每个li占满一行宽度 */
    grid-template-columns: 1fr;
  }

  li {
    /* 让li自身作为独立Grid容器，内部设置2列2行结构 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-column: span 1; /* 覆盖桌面端的跨4列设置 */
  }

  /* 按需求重排li内的p标签：A与C在上，B与D在下 */
  li p:nth-of-type(1) { grid-row: 1; grid-column: 1; }
  li p:nth-of-type(2) { grid-row: 2; grid-column: 1; }
  li p:nth-of-type(3) { grid-row: 1; grid-column: 2; }
  li p:nth-of-type(4) { grid-row: 2; grid-column: 2; }
}

修改说明 #

1. 桌面端优化：用repeat(4, 1fr)替代重复的1fr写法，代码更简洁；直接用grid-column指定位置，避免了易冲突的grid-area。
2. 移动端重构：
   • <ul>改为单列布局，每个<li>独立占一行，彻底避免跨元素的网格区域冲突。
   • 让<li>自身成为Grid容器，内部管理2列2行的结构，每个<li>的内容独立排列，不会和其他li的元素重叠。
   • 精准控制每个<p>的网格位置，完美实现“A与C上下对应、B与D上下对应”的需求结构。
   • 移除了原来导致冲突的全局grid-area和移动端subgrid相关设置，从根源解决重叠问题。

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