CSS Grid疑问：为何导航<li>元素在第二列堆叠？如何横向排列？

核心问题：Grid父/子元素关系理解偏差 #

CSS Grid的网格项只能是容器的直接子元素。你的.hcontent是Grid容器，它的直接子元素只有.fotomatic和.desktop（nav标签）这两个。而Product detail、About us、Follow us对应的a标签是nav>ul>li>a，属于嵌套层级的后代，根本不是.hcontent的直接子元素——所以你给它们设置的grid-column完全不生效。

这就导致.desktop这个nav元素默认占据Grid的剩余列空间，而它内部的ul是默认垂直排列的块级元素，三个li自然就堆叠在这块区域里了。

解决方案一：给导航的ul设置Grid（推荐，保留语义化） #

调整CSS，让导航内部的ul成为Grid容器，同时修改.hcontent的列布局，把导航部分合并为一列：

.hcontent {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template-rows: 1fr;
  grid-template-columns: 70% 30%; /* logo占70%，导航整体占30% */
  align-items: center; /* 垂直居中元素，可选优化 */
}

.desktop ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三个导航项各占1/3宽度 */
  list-style: none; /* 去掉默认列表圆点 */
  padding: 0; /* 去掉默认内边距 */
  margin: 0; /* 去掉默认外边距 */
  gap: 15px; /* 可选，增加导航项间距 */
}

/* 删除原来的无效设置 */
/* .product { grid-column: 2 / 3; } */
/* .about { grid-column: 3 / 4; } */
/* .follow { grid-column: 4 / 5; } */

.mobile {
  display: none;
}

.icon {
  width: 20px;
}

@media (max-width: 480px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
}

解决方案二：调整HTML结构，让四个元素成为Grid直接子元素 #

如果一定要保持.hcontent的4列布局，可以把导航项从nav中移出，直接作为.hcontent的子元素（语义化稍弱，但布局更直接）：

修改后的HTML：

<header>
  <div class="hcontent">
    <a class="fotomatic desktop logo" href="index.html">Fotomatic</a>
    <a href="#" class="desktop product">Product detail</a>
    <a href="#" class="desktop about">About us</a>
    <a href="https://www.instagram.com/" class="desktop follow">Follow us <img class="icon" src="./resources/images/instagram.png"></a>
    <nav class="mobile">
      <ul>
        <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
        <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
        <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
        <li><a href="#" class="button">Join us</a></li>
      </ul>
    </nav>
  </div>
</header>

对应的CSS（仅添加垂直居中优化）：

.hcontent {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template-rows: 1fr;
  grid-template-columns: 70% 10% 10% 10%;
  align-items: center; /* 垂直居中 */
}

.desktop {
  text-align: center; /* 可选，让导航文本居中 */
}

.mobile {
  display: none;
}

.icon {
  width: 20px;
}

@media (max-width: 480px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
}

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