每行中的列数（仅CSS解决方案）？

Question

当该行或列中只有一个项目时，如何强制一个项目扩展以填充整个行或列？

我的CSS：

.squareThumbnailContainer {
  border-radius: 5px;
  display: grid; 
  grid-template-columns: repeat(auto-fit, 1fr 1fr); 
  grid-template-rows:  repeat(auto-fit, 1fr, 1fr); 
  gap: 0px 0px; 
  grid-template-areas: 
    ". ."
    ". ."; 
  overflow: hidden;
  width: 70px;
  height: 70px;
}

.smallSquareThumbnailHelper {
  overflow: hidden;
}
.smallSquareThumbnail {
  object-fit: cover;
  width: 100%;
}

我知道最多有4个项目。

我的html（vue.js模板）

     <div
          class="squareThumbnailContainer"
        >
          <div
            v-if="index <= 3"
            class="smallSquareThumbnailHelper"
            v-for="(img, index) in images"
          >
            <img
              class="smallSquareThumbnail"
              :src="img.imageUrl"
            />
          </div>
        </div>

这是我当前的结果。当只有一个项目时，它起作用，但是当有2或3个项目...

“ https://i.sstatic.net/tuizd.png” alt =“在此处输入图像说明”>

update2：几乎可以感谢@thpbaxxter，但无法使其适用于两个项目... 。

​。

Answer 1

您可以在最后一个/第三张图像上使用网格列：Span 2;填充两个列宽度。

.squareThumbnailContainer {
  border-radius: 5px;
  display: grid; 
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px; 
  grid-template-areas: 
  overflow: hidden;
  width: 70px;
  height: 70px;
  margin: 1em;
}

.smallSquareThumbnailHelper {
  overflow: hidden;
}

.smallSquareThumbnail {
  object-fit: cover;
  width: 100%;
}

.smallSquareThumbnail:nth-child(3):last-child {
  grid-column: span 2;
}

.smallSquareThumbnail:first-child:nth-last-child(2),
.smallSquareThumbnail:first-child:nth-last-child(2) ~ .smallSquareThumbnail {
  grid-row: span 2;
}

<div class="squareThumbnailContainer">
  <div class="smallSquareThumbnail" style="background: red;"></div>
</div>

<div class="squareThumbnailContainer">
  <div class="smallSquareThumbnail" style="background: red;"></div>
  <div class="smallSquareThumbnail" style="background: green;"></div>
</div>

<div class="squareThumbnailContainer">
  <div class="smallSquareThumbnail" style="background: red;"></div>
  <div class="smallSquareThumbnail" style="background: green;"></div>
  <div class="smallSquareThumbnail" style="background: blue;"></div>
</div>

<div class="squareThumbnailContainer">
  <div class="smallSquareThumbnail" style="background: red;"></div>
  <div class="smallSquareThumbnail" style="background: green;"></div>
  <div class="smallSquareThumbnail" style="background: blue;"></div>
  <div class="smallSquareThumbnail" style="background: yellow;"></div>
</div>