Question

从现在开始的三天以来，我一直在尝试寻找一种使网格内的元素具有自由高度的方法，之所以这样问，是因为元素在同一行上的高度会自动获得相同高度的“拉伸”，我尝试通过将其更改为“开始”来删除此“拉伸”，因此：在网格类中，我做了以下操作：

.grid{
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
align-items: start; /*default stretch*/
}

现在发生的事情是：在网格内部，列之间的元素（块“ divs”）被推到行的上方，所以现在它们堆叠在“它们的顶部” '行。

好吧，现在的问题是：我要制作元素（块“ divs”） 不是在同一行上，我想像在行之间而不是在列之间嵌套一样，但是会自动而不是手动进行。

有关详细说明，请参见此照片：就像这样： enter image description here

我想要这样：

enter image description here

如果我们使用align-items：start；那么第一行中的元素和第二行中的元素之间将有一个空格。（请参阅照片以进行说明）

所以我认为并发现不可能做到这一点，除非我们制作的网格系统仅包含列而不包含行。

例如：我想创建一个像这样的网格系统：来自materializecss主题： https://themes.materializecss.com/pages/demo

，而不使用网格模板区域或那些命令。非常困难和不可能？解决方案？

我希望用户手动创建自己的卡片，然后网格系统自动对其进行响应。

Answer 1

您正在寻找所谓的“砌体”布局，该布局以处理该布局的JS库命名。如果您的项目处于统一层次结构中（即它们都是同级物品，没有列的容器），那么仅靠CSS不可能做到这一点。

Here's a link to the Masonry library供参考。

如果您想完全在HTML / CSS中处理此问题，可以通过创建三列并将子级添加到这些列中来实现：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.col {}

.el {
  background: #ccc;
  margin-bottom: 10px;
}

<div class="container">
  <div class="col">
    <div class="el" style="height: 110px;"></div>
    <div class="el" style="height: 50px;"></div>
    <div class="el" style="height: 70px;"></div>
    <div class="el" style="height: 90px;"></div>
  </div>
  <div class="col">
    <div class="el" style="height: 50px;"></div>
    <div class="el" style="height: 100px;"></div>
    <div class="el" style="height: 70px;"></div>
    <div class="el" style="height: 100px;"></div>
  </div>
  <div class="col">
    <div class="el" style="height: 70px;"></div>
    <div class="el" style="height: 100px;"></div>
    <div class="el" style="height: 100px;"></div>
    <div class="el" style="height: 50px;"></div>
  </div>
</div>

有什么办法使CSS Grid仅用于没有行的列吗？

1 个答案: