MaterializeCSS - 具有不同高度的网格布局[重复]答案

【问题标题】：MaterializeCSS - Grid Layout with different heights [duplicate]MaterializeCSS - 具有不同高度的网格布局[重复]
【发布时间】：2016-12-07 12:55:32
【问题描述】：

我比 Bootstrap 更喜欢 MaterializeCSS，因为它们支持 Google Material Design。到目前为止我真的很喜欢它，它甚至在 javascript 部分也有很多有用的组件。但我最缺少的是不同高度的动态网格布局。如果你不懂我的英语，请看一下图片。我想要图 1 中的样子。有没有办法在不使用另一个 javascript 框架/库的情况下做到这一点？

【问题讨论】：

我认为没有办法将纯 css 中的布局作为包装算法，即使对于 flexbox，也不要考虑空白空间，只需包装到下一行。您的示例更加复杂，因为项目的顺序取决于网格中已放置项目的最小高度。
您可以使用this algorithm，这将产生一个n维的列数组，每个列中都放置了项目。使用 Flexbox 或百分比宽度对这些列进行布局，并让默认布局垂直堆叠列中的项目。然后你可以使用任何视图库来渲染它，例如 React。 See React solution here

标签： javascript css materialize

【解决方案1】：

纯 CSS 解决方案是使用 column 属性。

但请注意，这仅在内部 div 具有相同宽度时才有效。

HTML

<section>
  <img src="path" />
  <img src="path" />
  <img src="path" />
  <img src="path" />
</section>

CSS

body{
  margin: 0;
}

section{
  column-width: 300px;
  column-gap: 5px;
  padding: 5px;
}

section img{
  width: 100%; 
}

演示

Pen

【讨论】：