Grid布局下li元素行定位异常问题求助

核心问题：你给li设置的Grid定位属性不生效，是因为**li不是Grid容器#sec2grid的直接子元素**——Grid布局的定位规则只对容器的直接子项（grid item）生效，而你的li被包裹在ul里面，ul才是#sec2grid的直接子元素，所以li上的grid-column/grid-row完全不起作用。

解决方案一：保留语义结构，让ul成为Grid子项并内部嵌套Grid #

这种方式不需要修改HTML结构，只调整CSS即可：

#section2 {
  width: 50%;
}

#sec2grid {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: repeat(6, auto); /* 用auto自适应内容高度，比固定17%更合理 */
  gap: 15px; /* 可选，增加元素间间距 */
}

#section2 ul {
  list-style: none;
  grid-column: 2 / -1; /* 让ul占据第二列的所有行 */
  display: grid;
  grid-template-rows: repeat(6, auto);
  margin: 0;
  padding: 0;
}

#section2 li {
  margin-top: 30px;
  font-size: var(--text);
  font-weight: bold;
}

/* 简化左边图片的Grid定位 */
#sec2grid img {
  grid-column: 1;
}

解决方案二：调整结构，让li成为Grid容器的直接子元素 #

把li从ul中移出，直接作为#sec2grid的子元素（注意保持img和li的顺序对应）：

修改后的HTML #

<section id="section2">
  <h2>Comment passer<br>une commande ?</h2>
  <div class="separator"></div>
  <div id="sec2grid">
    <img src="style/img/1.svg">
    <li id="sec2li1"><span class="colorGreen">Contactez </span>notre équipe, présentez lui votre besoin.</li>
    <img src="style/img/2.svg">
    <li id="sec2li2">Un interlocuteur dédié étudie votre demande, vous propose une <span class="colorGreen">sélection de produits adaptés</span>et source le matériel auprès de nbotre réseau de partenaires certifiés.</li>
    <img src="style/img/3.svg">
    <li id="sec2li3">Vous choisissez votre garantie : <span class="colorGreen">12 mois ou 24 mois</span></li>
    <img src="style/img/4.svg">
    <li id="sec2li4">Nous vous soumetton un devis, <span class="colorGreen">vous validez votre commande</span></li>
    <img src="style/img/5.svg">
    <li id="sec2li5">En 5 jours ouvrables en moyenne <span class="colorGreen">votre commande vous est espédiée.</span></li>
    <img src="style/img/6.svg">
    <li id="sec2li6">Un <span class="colorGreen">SAV assuré</span>par l'équipe.</li>
  </div>
</section>

对应CSS（保留你原来的li定位逻辑） #

#section2 {
  width: 50%;
}

#sec2grid {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: repeat(6, 17%);
}

#section2 li {
  list-style: none;
  margin-top: 30px;
  font-size: var(--text);
  font-weight: bold;
}

#sec2grid img:nth-child(odd) { /* 奇数位置是img，对应第一列 */
  grid-column: 1;
}

#sec2li1 {
  grid-column: 2;
  grid-row: 1;
}

#sec2li2 {
  grid-column: 2;
  grid-row: 2;
}

#sec2li3 {
  grid-column: 2;
  grid-row: 3;
}

#sec2li4 {
  grid-column: 2;
  grid-row: 4;
}

#sec2li5 {
  grid-column: 2;
  grid-row: 5;
}

#sec2li6 {
  grid-column: 2;
  grid-row: 6;
}

补充说明 #

你之前用:nth-child能选中元素但无效，就是因为选中的元素不是Grid容器的直接子项，Grid属性对它不生效。两种方案选哪种看你的需求：方案一保留了ul的语义结构，更符合HTML规范；方案二直接让li成为Grid子项，逻辑更直接。

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