如果缺少行或列，如何使CSS行间距和列间距不显示? [英] How do I get CSS row-gap and column-gap to not show up if row or column is missing?

问题描述

我有一个包含三个图像和一个文本部分的网格.我有网格的列和行间隙，如果我同时拥有所有三个图像，则可以很好地工作.但是，如果缺少任何图像，我仍然会为缺少的列或行获得列或行的间隙.如果行或列不存在，这些间隙是否有办法消失为空?

I have a grid with three images and one text section. I have column and row gaps for the gride which work fine if I have all three images. However, if any of the images are missing, I still get column or row gaps for the missing column or rows. Is there any way for those gaps to collapse to nothing if the rows or columns are not there?

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

The example that I have included gives the three cases with 1, 2 or 3 images in a responsive design. In the one image example you can see the extra column gap at the right. When the browser gets skinny the row gaps for the missing rows become visible.

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>

谢谢

迈克

推荐答案

不要使用模板，而是将项目明确放置在需要的位置.请注意，我是如何将媒体查询更改为具有 min-width 而不是 max-width 的，所以我们只需要在大屏幕上定义项目位置，就将默认项保留在大屏幕上小屏幕

Don't use template but place the item explicitely in the needed place. Notice how I changed the media query to have min-width instead of max-width so we only need to define the item placement on big screen and we keep the default one on small screen

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>

这篇关于如果缺少行或列，如何使CSS行间距和列间距不显示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！