CSS 卡灵活行行为答案

【问题标题】：CSS Card Flexible Row BehaviorCSS 卡灵活行行为
【发布时间】：2017-09-02 01:26:12
【问题描述】：

我目前正在尝试在不使用语义 UI 的情况下创建此效果。 Codepen 链接：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 四卡可堆叠”类，然后您就可以添加任意数量的卡片 div，每行最多 4 张卡片。当达到一定尺寸时，它会跳成单行。

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

如何在纯 CSS 的帮助下有效地做到这一点？目前我正在进入 CSS Grid，也许这可以帮助我？

谢谢！

【问题讨论】：

请查看并评论我的回答，如果有不清楚或遗漏的地方，请告诉我。如果没有，那么如果您能接受对您帮助最大的答案，那就太好了。
当用户利用自己的空闲时间帮助你时，你能做的至少是回应，既然你选择不回应，我就删除了我的回答。

标签： html css semantic-ui css-grid

【解决方案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

【讨论】：