html - CSS 卡灵活行行为

Question

我目前正在尝试在不使用语义 UI 的情况下创建这种效果。代码笔链接:https://codepen.io/anon/pen/YxBOax

<div class="ui container">
  <div class="ui four cards stackable">
   <div class="teal card">Card1</div>
   <div class="teal card">Card2</div>
   <div class="teal card">Card3</div>
   <div class="teal card">Card4</div>
   <div class="teal card">Card5</div>
   <div class="teal card">Card6</div>
 </div>
</div> 

正如您在此处看到的，您只需设置类“ui four cards stackable”，然后您就可以添加任意数量的卡片 div，最多可以连续添加 4 张卡片。当达到一定尺寸时，它会跳到单行。

在我的应用程序中，用户可以根据需要添加任意数量的卡片，这不可能为每 4 张卡片创建行...

如何在纯 CSS 的帮助下高效地做到这一点？目前我正在接触 CSS 网格，也许这对我有帮助？

谢谢!

Answer 1

这是一个使用 CSS Grid 的纯 CSS 版本:

revised codepen

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 20%);
  justify-content: space-between;
  grid-gap: 20px;
  padding: 20px;
  width: 90%;
  margin: 0 auto;
  background-color: gray;
}

.card {
  background-color: whitesmoke;
}

@media ( max-width : 500px) {
  .container {
    grid-template-columns: 1fr;
  }
}

<div class="container">
  <div class="card">Card1</div>
  <div class="card">Card2</div>
  <div class="card">Card3</div>
  <div class="card">Card4</div>
  <div class="card">Card5</div>
  <div class="card">Card6</div>
</div>

有关这些属性如何工作的解释，请参阅这篇文章:

• CSS-only masonry layout but with elements ordered horizontally