html - 没有断点，网格行跨度不起作用

Question

我当时在做一个图片库，我想做的是让一些图片更宽一些，让一些图片更高，这是我的代码，当我尝试水平跨越两条线时，它可以工作，但垂直方向没有任何变化

my HTML code

  <div id="img">
        <div class="tal"></div>
        <div></div>
        <div></div>
        <div class="wide"></div>
        <div class="big"></div>
        <div></div>
        <div></div>
        <div class="tal"></div>
        <div class="wide"></div>
        <div></div>
        <div class="big"></div>
        <div></div>
        <div class="tal"></div>
        <div class="big"></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div class="big"></div>
        <div></div>
        <div class="wide"></div>
        <div class="big"></div>
        <div></div>
        <div class="tal"></div>
    </div>
my CSS code 

#img {
    background: rgb(201, 201, 201);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px,1fr));
    grid-template-rows: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    grid-column: 1/5;
    grid-gap: 3px;
    height: auto;
    width: 100%;
}

#img .tal {
    background: lime;
    grid-row: span 2;
}

#img .wide {
    background: rgb(2, 2, 70);
    grid-column: span 2;
}

Answer 1

我在您的代码中添加了填充以查看效果，我发现单元格在垂直和水平方向上的跨度是正确的。如果您想要的结果不同，请对其进行说明并通过对您的帖子进行编辑来分享插图

div{
  padding: 30px;
}
#img {
  background: rgb(201, 201, 201);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column: 1/5;
  grid-gap: 3px;
  height: auto;
  width: 100%;
}

#img .tal {
  background: lime;
  grid-row: span 2;
}

#img .wide {
  background: rgb(2, 2, 70);
  grid-column: span 2;
}

<div id="img">
  <div class="tal"></div>
  <div></div>
  <div></div>
  <div class="wide"></div>
  <div class="big"></div>
  <div></div>
  <div></div>
  <div class="tal"></div>
  <div class="wide"></div>
  <div></div>
  <div class="big"></div>
  <div></div>
  <div class="tal"></div>
  <div class="big"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div class="big"></div>
  <div></div>
  <div class="wide"></div>
  <div class="big"></div>
  <div></div>
  <div class="tal"></div>
</div>