实现高度不等的网格答案

【问题标题】：Materialize grid with unequal heights实现高度不等的网格
【发布时间】：2018-01-19 02:09:32
【问题描述】：

我有一个使用 Materialize 构建的网格系统，其高度不等（动态内容）。

每行应该有 3 个列。我希望每一行都从新行开始。但是，这是我得到的结果 - https://codepen.io/anon/pen/QaVKyG。如您所见，第 4 张卡片似乎从一个奇怪的地方开始，左侧留下了很多空白。

我已经尝试过使用这里看到的 flexbox - https://codepen.io/anon/pen/rpqLgy

.row { display:flex; flex-wrap: wrap; }

但是，这种方法的问题是最后一行的列似乎没有向左对齐。

简而言之，我希望网格的工作方式与使用 bootstrap 时相同（例如 https://codepen.io/anon/pen/vpVvKv）。如您所见，对于引导程序，下一行的 cols 从下一行开始，即使 cols 的高度不相等。我似乎无法通过 Materialize 实现这一目标。

对于任一解决方案（使用 flexbox 或不使用 flexbox）的任何帮助，我们将不胜感激。谢谢！

【问题讨论】：

【解决方案1】：

我不确定这是否是您想要实现的目标..

我所做的是我创建了一个 cardHolder，然后里面是卡片

<div class="cardHolder">
  <div class="card"></div>
  <div class="card2"></div>
  <div class="card3"></div>
</div>

然后我为卡片的父级做了一个弹性盒子样式..

.cardHolder{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  flex-flow: row wrap;
  width:100%;
}

之后我设置了卡片的宽度，因为您希望每行有 3 列。我做了一个计算函数来初始化卡片的宽度

.cardHolder div{
  width:calc(100% / 3);
  padding:0;
  margin:0;
}

然后创建一个媒体查询以在屏幕尺寸小于 600 像素时初始化卡片的全宽..

@media only screen and (max-width: 600px){
  .cardHolder div{
   width:100%; 
  }
}

希望这会有所帮助。

【讨论】：

【解决方案2】：

你也可以使用相等的 max-height 和 min-height.Ex-

.card{
     border:1px solid black; 
     min-height:450px; 
     max-height:450px
     }

这将使您的卡片大小相等并对齐。

【讨论】：