Windows就像我的项目的网站网格

Question

Hello CSS Lovers！

我有一个问题要问你。我想制作一个类似Windows的投资组合网格。实际上我自己已经完成了它，但它并没有完美地运作。

如果你在这里看到我的第一个例子

这是我现在的网格。这是CSS：

article {
  width: 230px;
  height: 200px;
  display: inline-block;
}

article.highlight {
  width: 470px;
  height: 410px;
}

现在，我希望如此：

任何人都有解决方案吗？

Answer 1

article.highlight {
  width: 470px;
  height: 410px;
  float: left;
}

Answer 2

 article{
 float:left;
 display:block;
 }

Answer 3

您可以查看令人敬畏的Javascript库Masonry，它将这些方块完美地融入灵活的网格中。