材质化CSS-不同高度的网格布局

MaterializeCSS - Grid Layout with different heights(材质化CSS-不同高度的网格布局)

问题描述

我更喜欢MaterializeCSS而不是Bootstrap，因为它们支持Google Material Design。到目前为止，我真的很喜欢它，它有许多有用的组件，甚至在Java部分也是如此。但我最错过的是不同高度的动态网格布局。如果你听不懂我的英语，你可以看看这张图片。我希望它如图1所示。有没有一种方法可以在不使用其他Java框架/库的情况下完成它？

css

纯推荐答案解决方案将利用column属性。

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

HTML

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

css

body{
  margin: 0;
}

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

section img{
  width: 100%; 
}

演示

Pen

这篇关于材质化CSS-不同高度的网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！