使用没有装订线的网格 css 显示不同高度的动态卡片

Question

如何使用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。

Answer 1

你需要这样的东西吗？ https://codepen.io/hisbvdis/pen/XWrYqqO

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

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

.col-1 {
  grid-column-start: 1;
}

.big {
  grid-row: span 2;
}

<div class="wrapper">
  <div class="col-1" id="foo-1">One</div>
  <div id="foo-2">Two</div>
  <div class="col-1" id="foo-3">Three</div>
  <div class="big" id="foo-4">Four</div>
  <div class="col-1" id="foo-5">Five</div>
</div>