css - 如果缺少行或列，如何让 CSS row-gap 和 column-gap 不显示？

Question

我有一个包含三个图像和一个文本部分的网格。我有网格的列和行间隙，如果我有所有三个图像，它就可以正常工作。但是，如果缺少任何图像，我仍然会得到缺少的列或行的列或行间隙。如果行或列不存在，是否有任何方法可以使这些间隙消失？

我提供的示例给出了响应式设计中包含 1、2 或 3 张图像的三种情况。在一个图像示例中，您可以在右侧看到额外的列间隙。当浏览器变瘦时，缺失行的行间隙变得可见。

div.thumbnail
{
    background-color: green;
    padding : 1em;
    break-inside : avoid;
    display : grid;
    column-gap : 1em;
    row-gap : 1em;
    grid-template-columns : auto 1fr auto;
    grid-template-areas : "image1 text image2"
                          "image1 text image3";
}

div.thumbnail div.image1
{
    background-color : cyan;
    text-align : right;
    grid-area : image1;
}

div.thumbnail div.image2
{
    background-color : pink;
    text-align : left;
    grid-area : image2;
}

div.thumbnail div.image3
{
    background-color : limegreen;
    text-align : left;
    grid-area : image3;
}

div.thumbnail div.text
{
    background-color : orange;
    grid-area : text;
}

/* for printing and small devices like iPhone #1 */
@media screen and (max-width: 760px), print and (max-width: 5in)
{
    div.thumbnail
    {
        grid-template-columns : 1fr !important;
        grid-template-areas : "image1"
                                "image2"
                                "image3"
                                "text";
    }

    div.thumbnail div.image1,
    div.thumbnail div.image2,
    div.thumbnail div.image3,
    div.thumbnail div.text
    {
        text-align : center;
        width : auto !important;
    }
}

<h2>One Image</h2>

<div class="thumbnail">
    <div class="image1" style="width:200px">
        image 1
    </div>
    <div class="text">
        Text
    </div>
</div>

<h2>Two Images</h2>

<div class="thumbnail">
    <div class="image1" style="width:200px">
        image 1
    </div>
    <div class="image2" style="width:200px">
        image 2
    </div>
    <div class="text">
        Text
    </div>
</div>

<h2>Three Images</h2>

<div class="thumbnail">
    <div class="image1" style="width:200px">
        image 1
    </div>
    <div class="image2" style="width:200px">
        image 2
    </div>
    <div class="image3" style="width:200px">
        image 3
    </div>
    <div class="text">
        Text
    </div>
</div>

谢谢，

迈克

Answer 1

不要使用模板，而是将元素明确地放在需要的地方。请注意我如何将媒体查询更改为具有 min-width 而不是 max-width 因此我们只需要定义元素在大屏幕上的位置并保持默认位置小屏幕

div.thumbnail {
  background-color: green;
  padding: 1em;
  display: grid;
  gap: 1em;
}

div.image1 {
  background-color: cyan;
}
div.image2 {
  background-color: pink;
}
div.image3 {
  background-color: limegreen;
}
div.text {
  background-color: orange;
}

@media screen and (min-width: 760px) {
  div.thumbnail {
    grid-template-columns: auto 1fr; /* define only 2 explicit column */
    grid-auto-flow: dense;
  }
  div.image2,
  div.image3 {
    grid-column: 3; /* add another column if (2) or (3) is present */
  }
  div.text {
    grid-column: 2;
  }
  /* (1) and text span 2 row when (3) is present */
  div.image1:nth-last-child(4),
  .image3 + div.text{
    grid-row: span 2;
  }
  [class*=image] {
    width:200px;
  }
}

<h2>One Image</h2>

<div class="thumbnail">
  <div class="image1">
    image 1
  </div>
  <div class="text">
    Text
  </div>
</div>

<h2>Two Images</h2>

<div class="thumbnail">
  <div class="image1">
    image 1
  </div>
  <div class="image2">
    image 2
  </div>
  <div class="text">
    Text
  </div>
</div>

<h2>Three Images</h2>

<div class="thumbnail">
  <div class="image1">
    image 1
  </div>
  <div class="image2">
    image 2
  </div>
  <div class="image3">
    image 3
  </div>
  <div class="text">
    Text
  </div>
</div>