小编Pra*_*dar的帖子

如何使用css3创建动态网格系统。我想实现一个包含多张不同高度卡片的概览页面，并且显示卡片的顺序应该相同。

不同高度的卡片将根据配置设置显示在仪表板上，因此应自动调整。请帮助我为它编写通用的 css。

HTML:

<div class="wrapper">
  <div style="height:50px" id="foo-1">One</div>
  <div style="height:50px" id="foo-2">Two</div>
  <div style="height:50px" id="foo-3">Three</div>
  <div style="height:100px" id="foo-4">Four</div>
  <div style="height:50px" class="fifth" id="foo-5">Five</div>
</div>


CSS3:

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 10px;
 }

请参考：https : //codepen.io/prashantbiradar92/pen/MWgXGpG?&editable=true

问题：

id 为 foo-1,foo-3,foo-5 的 div 应该在 1 列中，foo-2, foo-4 应该在第 2 列中，没有空格。它应该按顺序显示。所以目前有 div foo-5 的排水沟。所以我必须调整div foo-5。