在保留可变高度的同时合并CSS网格

Question

所以我有一个高度可变的图像集合，并将它们显示在三列CSS网格中–结果看起来像这样

请注意顺序编号，并且较长的图像会占用更多列的高度，但宽度是固定的

我知道实现此目标的唯一方法是使用

<div class="grid">
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
</div>

可以正常工作，但我想使其具有响应性-具体来说，是将卡片顺序堆叠在单列中。我不确定该怎么做。通常，我会按行排列元素，然后将其压缩到单个列很容易，但是如果我按行排列，则不会获得动态高度效果。另外，我可以将这些列中的每一个都堆叠在一起，但是随后我失去了空头的顺序性质。

关于我能做什么的任何想法？

编辑：还要注意，我希望高度是动态的–我不必手动指定每个单元格的高度

Answer 1

不幸的是，这里没有任何神奇的CSS属性可以实现您想要的功能。但是我可以想到一些选择：

实现JavaScript库

您最好的选择可能是实现JavaScript库。有一些现有的库可以用来实现您正在寻找的这种精确的级联网格布局。

以下是几个选项：

1. Masonry
2. Isotope

使用JavaScript / jQuery重新排序元素

另一个选择是使用JavaScript在移动设备上重新排列元素。这样一来，您可以使用这些列在桌面上显示元素，而在移动设备上，可以手动对元素进行重新排序。

使用this stack overflow question的答案作为指导，您也许可以执行以下操作（使用jQuery）：

// when window is resized
$(window).on("resize", function() {
    // if width is less than 480px
    if ($(this).width() < 480) {
        // reorder elements
        var wrapper = $('.grid'), 
            items = wrapper.children('.bear'),
            arr = [11, 8, 10, 7, 9, 6];

        wrapper.append( $.map(arr, function(v){ return items[v] }) );
    }
});

如果布局已更新，则必须确保将每个新熊添加到此脚本中，因此，如果频繁添加熊，这可能会很烦人。

在移动设备上显示单独的网格

您还可以为手机创建一个完全独立的网格元素。然后，在移动设备上，您可以隐藏桌面网格并显示移动网格：

/* hide mobile grid by default */
.grid--mobile {
  display: none;
}

@media only screen and (max-width: 480px) {
  /* display mobile grid */
  .grid--mobile {
    display: block;
  }
  
  /* hide desktop grid */
  .grid--desktop {
    display: none;
  }
}

<div class="grid grid--desktop">
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
</div>

<div class="grid grid--mobile">
    <div class="col">
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
        <div class="bear">...</div>
    </div>
</div>

但是，这是多余的，因为它将导致在HTML中重复相同的确切元素两次。

Answer 2

也许您可以使用grid-auto-flow: dense属性来处理列范围。此属性告诉网格如何在其空间上分配项目。

必须记住的是，根据每个项目的指定大小，它们可能会开始乱序流动。

  

dense

     

是一个关键字，指定自动放置算法使用   “密集”打包算法，该算法尝试尽早填充漏洞   网格，如果稍后出现较小的项目。这可能导致物品   出现乱序，这样做会填补较大的   项目。

此处的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  grid-auto-flow: dense;
}

.grid-item {
  border: 1px solid black;
}

.item-2 {
  grid-row: span 2;
}

.item-3 {
  grid-row: span 3;
}

.item-4 {
  grid-row: span 2;
}

.item-6 {
  grid-row: span 3;
}

.item-5 {
  grid-row: span 3;
}

<div class="grid">
  <div class="grid-item item-1">1</div>
  <div class="grid-item item-2">2</div>
  <div class="grid-item item-3">3</div>
  <div class="grid-item item-4">4</div>
  <div class="grid-item item-5">5</div>
  <div class="grid-item item-6">6</div>
</div>