CSS 网格行问题答案

【问题标题】：CSS Grid row issueCSS 网格行问题
【发布时间】：2021-03-08 01:54:42
【问题描述】：

buy-page {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
  grid-auto-rows: 1fr;
  grid-template-rows: 200px;
  grid-gap: 10px;
  width: 200px;
  height: 400px;
}

<main class="buy-page">
  <div class="buy-1 buy">
    <img src="../picsfolder/BUY-1.jpg" alt=""> </div>

  <div class="buy-2 buy">
    <img src="../picsfolder/buy02.jpg" alt=""> </div>

  <div class="buy-3 buy">
    <img src="../picsfolder/SOLD-1.jpg" alt=""> </div>
</main>

你好，我想知道买 1 是在第二排。

这是我的代码，

有3张图片，第一张图片可以用grid-column: span 3去到第二列；

但是，当我尝试购买 1 {grid-row-start:1; grid-row-end:3;} 没有任何反应。

你能告诉我如何让买 1 延伸到第二排吗？

谢谢

【问题讨论】：

标签： html css css-grid

【解决方案1】：

我不确定我是否完全理解您在这里想要实现的目标，但是确保您使用 .buy 而不是 buy-page 正确引用您的课程

.buy {   
  display: grid;   
  grid-template-columns: repeat(2, 1fr);  
  position: relative;   
  grid-auto-rows: 1fr;   
  grid-template-rows: 200px;   
  grid-gap: 10px;   
  width: 200px;   
  height: 400px; 
}

【讨论】：