砌体网格未填充空白空间

Question

我一直在使用 Sveltekit 和 SCSS 构建 Masonry 网格。然而，在我的砖石网格中，所有项目都应该填充空白空间，而是由最大图像决定，并且不填充任何空白空间。

我已经成功获得了一个 3 列的普通 CSS 网格，看起来不错，但无法填充较小图像下的空白空间，因为尺寸是由最大图像决定的。检查 CSS 网格时，下一行项目在该行之前开始，而不是合并到第 1 行和第 2 行以填充空白空间。

我也尝试过使用 Flexbox，但无法理解它是如何工作的。首先将创建 3 个独立的 Flexbox 列，但对我来说，这对于 CSS 网格更有意义，但我对任何想法持开放态度！

在此屏幕截图中，您可以在第二行和第三行中看到由第一张图像/卡片决定的空白空间 网格截图

这是网格和卡片的 HTML

<div class="gallery-list">
        {#if galleryList.length > 0}
          {#each galleryList as gallery, index}
            <div class="gallery-card">
              <div class="gallery-card__image" on:click={() => openGalleryPost(gallery)}>
                <img src={gallery.image} alt="">
              </div>
              <div class="gallery-card__content">
                <div class="gallery-card__updates">
                  <div class="body_11">#{gallery.count}</div>
                  <div class="body_11 upvotes">
                    <span class="icon">
                        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.5625 5.5H8.4375" stroke="#666666" stroke-width="0.75"/>
                            <path d="M5.625 2.6875L8.4375 5.5L5.625 8.3125" stroke="#666666" stroke-width="0.75"/>
                        </svg>
                    </span>
                    [{gallery.upvotes}]
                </div>
                </div>
              </div>
            </div>
          {/each}
        {/if}
      </div>

这是用于网格和卡片的 SCSS

.gallery-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr auto;
        max-height: 620px;
        overflow-y: auto;
        padding-right: 12px;
        gap: 12px;
        grid-auto-flow: dense;

        .gallery-card {
          .gallery-card__image {
            margin-bottom: 8px;
            cursor: pointer;
            img {
              width: 100%;
              // height: 100%;
              object-fit: cover;
            }
          }
        }
}

任何想法或有用的链接/方向将不胜感激！

Answer 1

我认为您正在寻找的是这个等高声明：

grid-auto-rows:1fr;

根据这些图像是否应该与内容匹配，我会对其进行一些重组，以方便您自己。像这样的嵌套：

完成此操作并重组后，您可以使用我之前提到的线使盒子的高度相等。这将使它们相等，但内容将与顶部对齐。如果您在 gallery-card__content 下使用align-self，您可以在父级和图像下的任何位置对齐整个部分。

另一种方法是使图像大小相同。 CSS 有一个宽高比属性，您可以使用它来指定您想要的比例，然后在同一规则中您可以添加：object-fit:cover;使图像在框内缩放。当图像具有相似但不精确的比例时，此方法效果最佳。

.gallery-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr auto;
        max-height: 620px;
        overflow-y: auto;
        padding-right: 12px;
        gap: 12px;
        grid-auto-flow: dense;
        grid-auto-rows:1fr;

        .gallery-card {
          .gallery-card__image {
            margin-bottom: 8px;
            cursor: pointer;
            img {
              width: 100%;
              // height: 100%;
              object-fit: cover;
            }
          }
        }
  .gallery-card {
    border: 1px solid #000;
  }
  .gallery-card__content {
    
  }
}

<div class="gallery-list">
  <div class="gallery-card">
    <div class="gallery-card__image">
      <img src="https://media.istockphoto.com/id/1316134499/photo/a-concept-image-of-a-magnifying-glass-on-blue-background-with-a-word-example-zoom-inside-the.jpg?s=612x612&w=0&k=20&c=sZM5HlZvHFYnzjrhaStRpex43URlxg6wwJXff3BE9VA="/>
    </div>
    <div class="gallery-card__content">
      <div class="gallery-card__updates">#001</div>
      <div class="gallery-card__upvotes">[0]</div>
    </div>
  </div>
  <div class="gallery-card">
    <div class="gallery-card__image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/f/fb/One_Tall_Tower_%284403889626%29.jpg"/>
    </div>
    <div class="gallery-card__content">
      <div class="gallery-card__updates">#001</div>
      <div class="gallery-card__upvotes">[0]</div>
    </div>
  </div>
  <div class="gallery-card">
    <div class="gallery-card__image">
      <img src="https://media.istockphoto.com/id/1316134499/photo/a-concept-image-of-a-magnifying-glass-on-blue-background-with-a-word-example-zoom-inside-the.jpg?s=612x612&w=0&k=20&c=sZM5HlZvHFYnzjrhaStRpex43URlxg6wwJXff3BE9VA="/>
    </div>
    <div class="gallery-card__content">
      <div class="gallery-card__updates">#001</div>
      <div class="gallery-card__upvotes">[0]</div>
    </div>
  </div>
  <div class="gallery-card">
    <div class="gallery-card__image">
      <img src="https://media.istockphoto.com/id/1316134499/photo/a-concept-image-of-a-magnifying-glass-on-blue-background-with-a-word-example-zoom-inside-the.jpg?s=612x612&w=0&k=20&c=sZM5HlZvHFYnzjrhaStRpex43URlxg6wwJXff3BE9VA="/>
    </div>
    <div class="gallery-card__content">
      <div class="gallery-card__updates">#001</div>
      <div class="gallery-card__upvotes">[0]</div>
    </div>
  </div>
  <div class="gallery-card">
    <div class="gallery-card__image">
      <img src="https://media.istockphoto.com/id/1316134499/photo/a-concept-image-of-a-magnifying-glass-on-blue-background-with-a-word-example-zoom-inside-the.jpg?s=612x612&w=0&k=20&c=sZM5HlZvHFYnzjrhaStRpex43URlxg6wwJXff3BE9VA="/>
    </div>
    <div class="gallery-card__content">
      <div class="gallery-card__updates">#001</div>
      <div class="gallery-card__upvotes">[0]</div>
    </div>
  </div>
  <div class="gallery-card">
    <div class="gallery-card__image">
      <img src="https://media.istockphoto.com/id/1316134499/photo/a-concept-image-of-a-magnifying-glass-on-blue-background-with-a-word-example-zoom-inside-the.jpg?s=612x612&w=0&k=20&c=sZM5HlZvHFYnzjrhaStRpex43URlxg6wwJXff3BE9VA="/>
    </div>
    <div class="gallery-card__content">
      <div class="gallery-card__updates">#001</div>
      <div class="gallery-card__upvotes">[0]</div>
    </div>
  </div>
</div>